<p>Icons are some of the most-used graphics in web and application design. They’re so commonplace, in fact, that most non-designers take them for granted. For designers, though, icons are more than just graphical afterthoughts. They’re guideposts that lead web visitors and app users through a complex set of interactions with their favorite sites and tools. Such icons might be flat in design terms, but they’re certainly not lifeless. They’re a <strong>crucial component of user experience</strong>, and designers must pick them with care.</p> <p>Enter icon collections and libraries, where designers at all levels can find the best in icons for their website and app projects. These incredible online collections offer everything from basic icons that viewers are accustomed to seeing in everyday life to specialty sets that speak to a tailored audience. There are thousands of icon collections out there, but these 20 represent the best in terms of diversity, usability and value.</p> <h2 id="1-the-noun-project">1. The Noun Project</h2> <figure><img src="https://www.keycdn.com/img/blog/noun-project-banner.png" alt="noun project banner" class="img-fluid rounded"></figure> <p>One of the largest icon collections out there, <a href="https://thenounproject.com/" target="_blank" rel="nofollow noopener">The Noun Project</a> has an icon for almost anything you can imagine. Sourced from a variety of designers, the site offers plenty of icon diversity so that web and app designers can choose unique graphics that users haven’t already seen a hundred times. This is a comprehensive icon library that’s easy to search.</p> <p><strong>Key Features</strong></p> <ul> <li>Free and paid download options</li> <li>Icon sets</li> <li>A Mac app</li> <li>New icons uploaded on a near-daily basis</li> </ul> <h2 id="2-iconmonstr">2. IconMonstr</h2> <figure><img src="https://www.keycdn.com/img/blog/iconmonstr-banner.png" alt="iconmonstr banner" class="img-fluid rounded"></figure> <p><a href="http://iconmonstr.com/" target="_blank" rel="nofollow noopener">IconMonstr</a> is a comprehensive icon library offering over 4,300 icons sorted into 304 different collections. Every icon set offers both outline and filled versions of the graphics to ensure that they can be used for a variety of design applications. The site offers robust search functions and allows users to add icons to their favorites. Every icon is designed using a 24-pixel grid for hassle-free use in a variety of designs.</p> <p><strong>Key Features</strong></p> <ul> <li>Free use of all icons</li> <li>Convenient icon sets</li> <li>Four format download options</li> <li>Downsized icons optimized for web use</li> </ul> <h2 id="3-good-stuff-no-nonsense">3. Good Stuff No Nonsense</h2> <figure><img src="https://www.keycdn.com/img/blog/good-stuff-no-nonsense-banner.png" alt="good stuff no nonsense banner" class="img-fluid rounded"></figure> <p>The funky, hand-drawn icons at <a href="http://goodstuffnononsense.com/portfolio_tag/free/" target="_blank" rel="nofollow noopener">Good Stuff No Nonsense</a> are sorted into more than two dozen categories for ease of use. These quirky icons are perfect for designers who want the hand-drawn look but don’t have the time or skill to create and upload their own icons. All of the icons on this site are created by one artist, so they offer design consistency and can help bring a branded look to any site or app. Many of the icons are also vectorized for flexible design use.</p> <p><strong>Key Features</strong></p> <ul> <li>Low-cost and free icon sets available</li> <li>Custom icon creation services are available</li> <li>Ability to buy icon sets or single icons</li> <li>Icons are available in a variety of formats</li> </ul> <h2 id="4-orion-icon-library">4. Orion Icon library</h2> <figure><img src="https://www.keycdn.com/img/blog/orion-banner.png" alt="orion banner" class="img-fluid rounded"></figure> <p><a href="https://orioniconlibrary.com/" target="_blank" rel="nofollow noopener">Orion</a> is a relative newcomer to the icon library world. It is a project created by Pixeden and sets out to provide highly flexible web icons which can be modified directly from their web app. The web app allows you to perform a variety of modifications including corner and cap style, stroke width, and primary/secondary color selection. You can also search through their icon packs or directly from the search bar if you know exactly what you’re looking for.</p> <p><strong>Key Features</strong></p> <ul> <li>Thousands of icons available for free, even more if you purchase their pro plan</li> <li>Pro plan provides a “No attribution required license”</li> <li>Easy to use and intuitive web app to modify your icons</li> </ul> <h2 id="5-icomoon">5. IcoMoon</h2> <figure><img src="https://www.keycdn.com/img/blog/iconmoon-banner.png" alt="iconmoon banner" class="img-fluid rounded"></figure> <p>Used by large and small companies alike, <a href="https://icomoon.io/" target="_blank" rel="nofollow noopener">IcoMoon</a> is an icons collection that sets itself apart by offering both icon fonts and icon packs that support basic glyph editing. Available as both a website and an app, IcoMoon offers more than 4,000 free icons and offline storage of icons. Each icon pack features detailed licensing so that designers and developers know exactly how icons can be used. Users can also make their own custom icon fonts.</p> <p><strong>Key Features</strong></p> <ul> <li>Free and paid download options</li> <li>A wide variety of download formats</li> <li>Comprehensive icon management tools</li> <li>Free and easy updates via Cloud synching</li> </ul> <h2 id="6-pictonic">6. Pictonic</h2> <figure><img src="https://www.keycdn.com/img/blog/pictonic-banner.png" alt="pictonic banner" class="img-fluid rounded"></figure> <p><a href="https://pictonic.co/" target="_blank" rel="nofollow noopener">Pictonic</a> offers an array of icon fonts sorted according to theme. All of the icons are designed using a precise pixel scale so that they can be resized without loss to quality or integrity. Because they are offered as font sets, the icons in this collection can also be stylized using CSS elements instead of outside image editors. The Pictonic site also features a robust blog that details new icon releases and provides use tips for both new and experienced designers.</p> <p><strong>Key Features</strong></p> <ul> <li>Ability to buy icon sets or single icons</li> <li>Icons are totally scalable</li> <li>All icons can be styled with CSS</li> <li>Icons are available in a variety of file formats</li> </ul> <h2 id="7-icons8">7. Icons8</h2> <figure><img src="https://www.keycdn.com/img/blog/icons8-banner.png" alt="icons8 banner" class="img-fluid rounded"></figure> <p>With over 85,000 icons and daily updates, the <a href="https://icons8.com/" target="_blank" rel="nofollow noopener">Icons8</a> collection is hard to beat when it comes to selection and diversity. Users can search icons by tags or can browse more than 50 different thematic collections to find graphics that meet their needs. Icons8 focuses on flat icons that can be used across a variety of platforms and operating systems. Users can send in suggestions if they don’t find icons that fit their needs too.</p> <p><strong>Key Features</strong></p> <ul> <li>Both free and paid subscription options</li> <li>Access to vector icons that can be modified</li> <li>The ability to easily edit icon color</li> <li>Easy drag-and-drop to Photoshop, Xcode, Sketch and more</li> </ul> <h2 id="8-freepik">8. Freepik</h2> <figure><img src="https://www.keycdn.com/img/blog/freepik-banner.png" alt="freepik banner" class="img-fluid rounded"></figure> <p>Like its name suggests, <a href="http://www.freepik.com/free-icons" target="_blank" rel="nofollow noopener">Freepik</a> offers a huge database of free graphics, vectors and icons for use by web and app designers. The icon library section of the site offers more than 100,000 graphics that users can search or browse by theme. The icons range from simple to complex, and an array of line, filled and colored icons are available. Each icon has its own licensing restrictions.</p> <p><strong>Key Features</strong></p> <ul> <li>Free for personal and commercial use</li> <li>Icons can be downloaded in PNG, EPS and SVG formats</li> <li>Other vectors and images available on the site can easily be edited for use as icons</li> <li>New icons are added on a regular basis</li> </ul> <h2 id="9-pictos">9. Pictos</h2> <figure><img src="https://www.keycdn.com/img/blog/pictos-banner.png" alt="pictos banner" class="img-fluid rounded"></figure> <p><a href="http://pictos.cc/" target="_blank" rel="nofollow noopener">Pictos</a> offers both font icon sets and a Pictos Redux set designed especially for designers who need to resize and manipulate the site’s already-popular icons. With line, solid and color options available, this site offers sleek and elegant icons with plenty of design flexibility. Original vector paths are included in the Redux set to allow for unlimited editing of icons in Illustrator. The classic Pictos icon set features more than 800 simple line icons for design use.</p> <p><strong>Key Features</strong></p> <ul> <li>Both free and paid download options</li> <li>Icons are available in a variety of file formats</li> <li>Line, color and solid icon options are available</li> <li>All Redux icons are designed on a 24 by 24 pixel grid</li> </ul> <h2 id="10-glyphish">10. Glyphish</h2> <figure><img src="https://www.keycdn.com/img/blog/glyphish-banner.png" alt="glyphish banner" class="img-fluid rounded"></figure> <p><a href="http://www.glyphish.com/" target="_blank" rel="nofollow noopener">Glypish</a> represents an icons collection with more than 2,200 items in both line and filled-in styles. The icons are available in a large paid bundle or in individual bundles. This site features icons for iOS, Android and t