Home > Web Front-end > JS Tutorial > body text

20 front-end development ICON icon libraries worth collecting

青灯夜游
Release: 2021-02-26 10:27:28
forward
12735 people have browsed it

This article will share with you 20 ICON icon libraries (worth collecting) to make your website beautiful and readable. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

20 front-end development ICON icon libraries worth collecting

#The presence of icons in the application interface will give users a good first impression, which is very important. But developing an icon from scratch requires a lot of time and money. Using icons on your website allows you to communicate effectively with your visitors: they increase readability, highlight important content, reinforce functionality or features, and enhance the design. Therefore, using ready-made icons is a good choice.

List of the best icon libraries

I won’t introduce Alibaba’s iconfont here. Domestic developers basically know it, and they all Now, let’s take a look at some useful icon libraries available abroad.

1. Flaticon

Website: https://www.flaticon.com/packs
Format and Types: PNG, SVG, EPS, PSD, and BASE 64, Marketplace
Price and License: Limited Free Plan and Premium Plan starting at $9.99 per month

20 front-end development ICON icon libraries worth collecting

Flaticon Contains fully editable vectors that can be used for both personal and commercial projects. FlatIcon has over 230 million vector icons grouped into 51202 packages

This product has an Adobe extension that allows us to easily import Photoshop# Icons in ##, Illustrator and After Effects. If you wish to use a web font instead of a static file to display your icon, FlatIcon will take care of the format conversion and generate a usable web font. We can also customize the downloaded icon.

Highlights:

    Over
  • 90,000 icons;
  • SVG, EPS, PSD and PNG formats;
  • Icon font;
  • Adobe extension for CC suite;
  • Linkshare license with premium options;
  • And new ones added every month Icon pack;

2. Jam Icons

Website:

https://jam-icons.com/Formats and Types: SVG, CSS
Price and License: Free, MIT

20 front-end development ICON icon libraries worth collecting

Jam icons are a set

896 handmade icons. This icon pack comes in SVG and font versions. These icons can be used as SVG files in web, print, or application development projects. These icons can also be used as fonts for a given CSS stylesheet. There are three sizes: 16px, 24px and 32px. We can also choose between filled or stroked icons.

3. Fontisto Icon Pack

Website:

https://fontisto.com/Format and Type: CSS
Price and License: ree, MIT

20 front-end development ICON icon libraries worth collecting

## Fontisto

is a vector icon pack. Icons can be customized instantly: size, color, shadow and everything CSS can do. This product does not require Javascript. Fontisto The icons are vectors, which means they will look great on high-resolution monitors. On this website we can find complete documentation and various guides on how to launch and customize the product. We just need to paste the link on the website to start using the product. Additionally, it is possible to use Fontisto with suitable package managers: npm, yarn, bower, etc.

4. Iconmonstr

Website: https://iconmonstr.com/

Format and type: SVG, EPS, PSD and PNG, Marketplace

Price and License: Free

20 front-end development ICON icon libraries worth collectingIn the icon collection of Iconmonstr There are

4400

multiple icons. Each icon set offers both outline and filled versions of the graphics to ensure they can be used in a variety of design applications. Every icon on the site is provided for free, and the icon files come in formats such as SVG, AI, PSD, and PNG, which can be used for free and commercial purposes. <p><strong>Iconmonstr</strong> Makes searching for icons simple with its powerful search functionality. We can also save our favorite icons in personal favorites for future use. </p> <p><strong>Highlights:</strong></p> <ul> <li>Free use of all icons</li> <li>Download options in four formats, plus reduced icons optimized for web use </li> </ul> <p><span style="font-size: 16px;"><strong>5. Pixsellz Material Icons Library</strong></span></p>## Website: <p>https://icons.pixsellz.io/<a href="https://icons.pixsellz.io/" rel="nofollow noreferrer" target="_blank"></a>Formats and Types: SVG, EPS, PSD, PNG, FIG, Material design<br>Price and License: Free, Apache License Version 2.0<br></p> <p><span class="img-wrap"><img src="https://img.php.cn/upload/image/675/860/232/1614306134100281.png" title="1614306134100281.png" alt="20 front-end development ICON icon libraries worth collecting"></span></p>A large number of <p>1000<code>Multiple icons divided into 16 different categories. The free icon pack is inspired by Material design and presented in three different visual styles - circle, outline and two-tone. The kit comes in Please enter code6 different file formats so we can use icons from our preferred design software.

Highlights:

    3 styles
  • Figma style
  • 1000+ icons
  • 24×24 pixels
  • Sketch style
  • 16 categories, and 6 file formats

6, Entypo

Website:

http://www.entypo.com/Format and Type: SVG
Price and License: Free, Creative Common License 4.0

20 front-end development ICON icon libraries worth collecting

Entypo is a svg icon series product, carefully produced by Daniel Bruce of Sweden a few years ago. These icons are awesome: they are the most important when it comes to giveaways. This product is available as SVG with 411 icons, free under a Creative Commons license.

7. Evil Icons

Website:

https://evil-icons.io/Format and Types: SVG, Sketch
Price and License: Free, MIT

20 front-end development ICON icon libraries worth collecting##This library is huge and contains everything - both SVG and raw Source File. This means we can download

SVG

as well as Illustrator files and .sketch files of Sketch.

8. Streamline IconsWebsite:

https://streamlineicons.com/

Format and type : ICONJAR, SKETCH, FIG, XD, SVG, AI, PDF, PNGPrice and License: Free to $411

20 front-end development ICON icon libraries worth collecting# #Streamline Icons

is a free icon inventory with strong compatibility. The library is organized into 53 categories and comes with

30000 multiple vector icons. This is one of the few icon packs optimized for Sketch, allowing easy manipulation of stroke width and color. Built-in Sketch features like symbols and shared styles make reusing elements like icons quick and easy.

The company has its own web application that helps browse, search and download icons directly from the browser.

Highlights:

More than

30000
    vector icons
  • Smart strokes to modify outline thickness
  • Supports Sketch, AI, EPS, PDF, PNG, SVG formats
  • Every icon in Streamline 3.0 has three unique weights: light, regular and bold
9, Smashicons

Website: https://smashicons.com/

Format and type: JAR, SVG, AI, SKETCH, Marketplace Price & License: Free to $149

20 front-end development ICON icon libraries worth collectingSmashicons

offers more than # in its library Comprehensive icon collection of ##219000

icons. Smashicons works a little differently than other products: its pricing is based on a monthly plan of $5 per month. This means that for just $5 per month you can access their entire collection of existing icons as well as any future icons they release. Highlights:

  • A very large collection of icons
  • There are icons all compatible with multiple platforms
  • Easy to use web app to search and find the icons you need
  • Subscription-based business model
  • Multi-platform support

10, Icons8

Website: https ://icons8.com/
Formats and Types: SVG, PNG, PDF
Price and License: Good Boy License, Free to $19.90

20 front-end development ICON icon libraries worth collecting# The icon set in

##Icons8 comes with over 120000 icons covering multiple categories. From corporate and office settings to people, food and social media icons. These icons are designed to mimic the look of a specific operating system. We can download them in Windows, iOS and Android versions.

Highlights:

    SVG, PNG and HTML formats
  • Provides various styles of icons, such as linear icons, solid icons and full icons Colorful
  • All icons available for download via .zip file
  • Editable before downloading
  • Free and paid subscription options

11, Icomoon

Website:

https://icomoon.io/Format and type: SVG, PNG, PDF
Price and License: Free to $139.90

120 front-end development ICON icon libraries worth collecting

Icomoon is a complete tool for image and icon management. This product features high-quality solutions for editing and managing icons. Icomoon icons are handcrafted on a 16X16 grid and available in SVG, EPS, PSD, PDF and AI formats. The icon set is also constantly updated by its creator.

Each icon pack comes with detailed licensing so designers and developers know exactly how to use the icons. Users can also customize their own icon fonts.

Highlights:

    Comprehensive icon management tool
  • Free and paid download options
  • Multiple download formats

12. Glyphish Icon Pack

Website:

http://www.glyphish.com/Formats and Types: SVG, PNG, PDF, PSD, Glyph, Icon font
Price and License: Creative Common Attribution, from $25 to $99

120 front-end development ICON icon libraries worth collecting

Glyphish provides a variety of different icon libraries. Each library comes in a variety of different formats, including PNG, SVG, PSD, and AI. Basic icons are available for $25, while the final icon pack has a regular price of $99. Free demo contains 50 icons. Designers can easily edit all icons.

Highlights:

    Icons for multiple platforms: iOS, Android, Web, Window
  • A set of 50 free icons
  • Easy drag and drop into Xcode
  • Icons for Apple Retina display

13, Ionicons

Website:

https://ionicons.com/Formats and Types: SVG and Webfont, Icon font
Price and License: MIT

120 front-end development ICON icon libraries worth collecting

The Ionic team decided to release its icons in the form of a web font called

Ionicons. Naturally, they are completely free and available on GitHub. We can even add these icons directly to your site using the CDN version of the stylesheet, which also supports SVG and web fonts. Highlights:

Totally Free

    Easily set up by copying and pasting the link
  • Appears as a web font
  • Custom size
  • Over 1100 items
14, Angular Material Icons

URL: https://material.io/resources...

Formats and Types: SVG, Webfont, Material designPrice and License: Free, Apache License 2.0

Material Icon is a free icon library provided by Google. To ensure readability and clarity, these icons have been optimized to look great on all platforms and displays. These icons are completely free and can be accessed on GitHub. This icon library is large, with over 1,000 icons covering a wide range of interface functions.

15. Linearicons

Website: https://linearicons.com/
Format and type: SVG, Webfont, Icon font
Price and License: Free to $59, Common Creative License

120 front-end development ICON icon libraries worth collecting

##Linearicons is one of the most popular and best icon packs for personal or commercial purposes. Linearicons are available in both free and premium versions, and the free version of this amazing icon pack is licensed under Creative Commons. We can also choose other packages according to our needs, such as "Desktop Package".

Highlights:

    CloudFront CDN
  • Offers free version
  • With different formats: SVG, PDF, Webfont.

16. Feathericons

Website:

https://feathericons.com/Format and Types: SVG, Webfont, Iconfont
Price and License: Free, MIT License

120 front-end development ICON icon libraries worth collecting

##Feather

is the most One of the popular open source icon sets. These are open source icons designed on a 24X24 grid. These icons are provided in SVG format. It is licensed under the MIT license and has approximately 250 icons in open source. The icons are easy to edit and look clear regardless of size. They were designed first as an icon font, so it is embedded as a web font.

17. IconfinderWebsite address

https://www.iconfinder.com/

Format and type : SVG, PNG, ICO, MarketplacePrice and License: $9 to $49 per month

120 front-end development ICON icon libraries worth collecting##Iconfinder

is one of the most popular icon resources on the Internet. It provides over

400 million icons and provides users with various search options including icon format, price, size, background, etc. Multiple monthly payment plans are also available - from $9 to $49. We can also opt for a “pay as you go” system. Icon files are available in SVG, PNG, ICO, ICNS

and

Adobe Illustrator formats, with sizes ranging from 16×16 to 512 ×512. If you can't find something you like, or just want a custom icon designed specifically for our brand, you can also work with some of the best designers on the site. Highlights:

Free and paid usage options

    Flexible search functionality
  • Icons available in multiple formats
  • Many Categories and Styles
  • Mark Editor
18. The Noun Project

URL: https://thenounproject.com/

Formats and Types: SVG, PNG, MarketplacePrice and License: Creative Commons License

120 front-end development ICON icon libraries worth collectingNoun Project

offers one of the largest icon libraries on the web. Most of the site's icons are available in

SVG and PNG formats, as well as black and white styles. The website’s library consists of a variety of icon files designed by independent designers. Here, creators and creative professionals can collaborate to sell their designs and find a seemingly endless library of premium icons.

Searching this large and comprehensive icon library is easy. Other key features of this icon library include free and premium download options, many large icon sets, apps for Mac, and more. The icon library is updated regularly, with new icons and sets released daily.

Highlights:

Over

150,000
    icons
  • SVG, PNG formats
  • Search and discovery tools
  • Free and paid download options
  • New icons uploaded almost daily
19, Fontawesome Icons

Website: https://fontawesome.com/icons
Formats and Types: SVG, PNG, Icon font, Marketplace
Price and License: SIL OFL 1.1

20 front-end development ICON icon libraries worth collecting

Font Awesome is the most widely used and popular icon font around. This is also the default icon set for Teams on boot. It is also available as an SVG icon as well as other formats. This license is free for any commercial or personal use.

Every icon is fully scalable and can be maintained directly in CSS. We can change colors, shadows, background gradients and pretty much everything else using pure CSS3. Another reason to use this library is that it is fully optimized and requires no JavaScript at all, so there are no compatibility issues.

Highlights:

  • Vector font
  • Each icon comes with CSS classes and Unicode
  • Free
  • Built with accessibility in mind
  • Easy to upgrade across sites
  • Desktop cheat sheet with entire icon library available

20, Lineicons

Website: https://lineicons.com/
Format and type: SVG, Web font, Icon fontace
Price and License: Free

20 front-end development ICON icon libraries worth collecting

LineIcons Also offers a free CDN with clear documentation, making it easy to get started.

This icon pack is completely free and comes with 450 multiple line icons. It covers every basic icon required for projects from different categories. LineIcons Also provides a free CDN and clear documentation to make it easy to get started. It comes with 2 different scalable packages – WebFonts and SVG files that can be used depending on your project needs.

Highlights:

  • 450 free icons
  • SVG files
  • Free CDN

Summary

When choosing an icon library, it should not be based on the popularity of the icon library, but which icon library is more suitable for the current development project and which icon The style of the library is more in line with the style of our application.

Hope this article helps choose the solution that best suits your needs.

English original address: https://blog/top-icons-packs-and-resources-for-web/

Author: Eugene Stepnov

Translation Address: https://segmentfault.com/a/1190000022273604

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of 20 front-end development ICON icon libraries worth collecting. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template