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.
#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
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
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
## 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.
Website: https://iconmonstr.com/
Format and type: SVG, EPS, PSD and PNG, Marketplace
Price and License: Free
In 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
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
##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
# #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 iconsSmart strokes to modify outline thickness- 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
Smashicons
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.
- 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
# 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
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
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
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
##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
##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.
17. IconfinderWebsite address
https://www.iconfinder.com/Format and type : SVG, PNG, ICO, MarketplacePrice and License: $9 to $49 per month
##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.
Free and paid usage options
Flexible search functionality- Icons available in multiple formats
- Many Categories and Styles
- Mark Editor
-
-
18. The Noun ProjectURL: https://thenounproject.com/
Formats and Types: SVG, PNG, MarketplacePrice and License: Creative Commons License
Noun 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 iconsSVG, PNG formats- Free and paid download options
- New icons uploaded almost daily
-
-
19, Fontawesome IconsWebsite: https://fontawesome.com/icons
Formats and Types: SVG, PNG, Icon font, Marketplace
Price and License: SIL OFL 1.1
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
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
