Best free icon sets for UI design & development

The search for the absolute best free UI icon sets

Iconography is a crucial part of UI design and web development in general. Well-chosen icons can effectively convey any message and enhance your brand through thoughtful, eye-catching visuals. ✨

However, badly chosen icons can also disrupt the experience or, even worse, confuse the user and push towards the wrong interface actions.

When it comes to UI icons, there's definitely no need to draw icons yourself. The internet is booming with amazing icon sets available for free, so the hardest part is choosing the right icon pack to use.

To help with that ambiguous task, we've delved into the multi-verse of vector graphics to find the best free icon packs for your interfaces. We've researched hundreds of open-source, free, and paid icon sets to find the best ones.

On this page, we've collected absolutely top-notch free icons for your projects. Note that all included sets have free or open-source licenses, so you can download and incorporate them into your project without hesitation.

How to choose the perfect icon set❓

Selecting the right package from the start can save you a lot of trouble later on. That's why it should be considered one of the initial steps for your project's design. However, how do you pick the right one?

Because iconography is the foundation of your designs, once introduced, icons will spread like roots through your files. So, make sure to use high-quality icons as you would use high-quality soil for your garden.

As the project grows, using inconsistent or low-quality icons can result in additional work later on. To prevent frequent redesigns of your project's UI and components, it's recommended that you choose the best option from the very start.

So here are the key aspects to look for when choosing an icon set.

1. Personality and branding in icons

Ensure the icon set aligns well with your brand's visual identity/voice and matches other design elements. To do so, pick the set that will complement your brand's aesthetic and style without requiring changes or transforming it into a new brand.

Remember to match icons with their proposed commands consistently across all project designs. For example, if you used a specific menu icon in one place, there's no need to use a different one when dealing with another menu or a collapsing element.

The main purpose of an icon set is to reinforce your brand with visual consistency across all UI areas while being easy to recognize and associate with actual functionality.

2. User-centered context for icons

Know how and when users will interact with certain icons. Think about the context in which the icons will appear to users, and use this as the entry point to enhance your project's usability with icons. Avoid using icons where they are not needed.

Determine whether a filled, outlined, duotone, 3D, or skeuomorphic icon should be used to better translate a particular context or aspect of your brand.

Make sure to choose an icon pack that supports multiple weights or variants for a single symbol/metaphor so that one icon can be used for multiple contexts.

For example, if you need an outlined heart icon for your project's users to like something, you may also need a filled heart icon to indicate that something has been liked.

3. Icons consistency

While each icon aims to deliver its own message, all icons should exist in harmony. That's why it's an important designer's job to maintain consistency across all icons in the project.

This consistency may involve things like maintaining uniform spacing between icons and their elements, ensuring equal visual volume for all icons, or aligning icons with the fonts. To minimize all these manual efforts, select a set that already adheres to these requirements from the start.

Note: For consistency reasons, refrain from mixing different icon styles, even if they come from the same set or use different shapes/metaphors for the same actions in the same UI. Also, refrain from mixing the same styles from different sets.

4. Solid (flat) icons vs. Outlined Icons

Most icon sets come in two styles: solid (filled) icons and outline (stroke) icons.

Solid icons are typically faster to recognize since they often use more traditional and straightforward metaphors, with filled shapes providing more precise context for our eyes to track.

Outlined icons are more basic and are generally a good choice for modern, data-heavy interfaces where multiple actions need to fit in a dense space. Outline icons work best as more compact metaphors and can appear less noticeable in the overall UI landscape.

However, outline versions can have too slim spacing, which can make them harder to recognize. If you notice this happening, opt for filled icons instead.

5. Border thickness and icon style

The visual weight of your icons depends on their border thickness and style.

Consider finding a balance between thicker borders and smaller icons (e.g., 16px). For larger icons (>24px), a standard 2px border is often most effective.

Note: It is always a good idea to adjust the border thickness to match your fonts and achieve that desired visual impact. If you are looking for such customization, opt for icon packs that contain a variable font/SVG format.

6. Amount of icons and adaptability

Ensure the set has enough icons for your project. Some packs may provide you with every icon you need, while others might be limited to only a few categories that you will actually use.

Research the structure of the icon pack before making this long-term commitment and incorporating it into your designs. Otherwise, you may need to create custom icons on the go, which will cause more inconsistencies and wasted time.

Remember that the perfect icon pack includes the necessary icons, and it will always get you better results than a large all-in-one mega pack. Therefore, every aspect of your icon set can contribute to the development of your project's visual style.

To help you succeed, we've bundled a complete and growing list of the best free icon sets that could provide your project with flexibility and contain at least 250+ icons per set.

When choosing an icon set, consider these aspects and opt for the best pack.

✰ Make sure to bookmark this page and revisit it occasionally for newly added icon sets. If you know an icon set that is missing and should be added, please send it to us.

Without further ado, let's explore the absolutely best icon sets:

Atlas Icons ↗

Atlas Icons is a free, open-source collection of 2,700+ icons available under the MIT license.

The Atlas icons set features an SVG variable format and code packages for React, Flutter, and Vue. It also includes a Figma plugin to help you easily find and add Atlas icons to your Figma canvas.

Boxicons ↗

Boxicons is a sleek open-source icon pack for designers and developers, created as an alternative to Material Icons. Like most icon sets, Boxicons come in two styles: solid (filled) and outlined, with 1,600+ icons in total.

As a special bonus, Boxicons includes custom logo icons for popular brands and apps. The package includes SVG as well as icon font formats, such as WOFF2, WOFF, and TTF.

Clickons ↗

Carefully crafted open-source icons with filled and outlined styles icons by the Craftwork team.

The Clickons set provides 17 distinct categories and 500 icons in total. All icons are thoughtfully crafted in a single universal style that can match most UI design projects.

CSS Icons ↗

CSS Icons offers 700 minimalistic, customizable, and open-source CSS icons in SVG format, styled-components, an NPM, and an API. You can find more information about it in the dedicated GitHub repo.

CSS icons are lightweight and scalable, making them easy to modify with pure CSS and ensuring your work gets top-notch visuals across any device.

Eva Icons ↗

Eva Icons is a pack of more than 480 beautifully crafted open-source icons available in outline and filled styles. All included icons support four animation types out of the box, including zoom, pulse, shake, and flip. The pack also includes an organized GitHub repo, as well as Sketch and Figma libraries.

Flagpack ↗

Flagpack offers over 250 open-source country flag icons optimized for design and coding projects.

All flag icons are available as Figma and Sketch files, as well as components for React, Vue, and Svelte. The project is regularly maintained to ensure an always up-to-date collection of countries' flag icons.

Flowbite ↗

Flowbite Icons offers a comprehensive set of over 520+ free open-source icons designed for web and mobile interfaces as scalable SVGs with adjustable stroke width.

Flowbite icons are fully customizable and are designed to seamlessly integrate with frameworks like Tailwind CSS and Bootstrap. The Flowbite collection features 10 categories, covering everything from basic UI elements to detailed illustrations.

Fork Awesome ↗

Fork Awesome is a complete icon font that is perfect for web apps design. It has 800+ open-source icons, most of which come in outline and fill styles. This icon pack has a long history of development and a comprehensive Get Started guide to help you fork these icons into your project.

Free Font Awesome Icons ↗

The most famous icon library that offers both free and premium vector icons. Font Awesome Free is an open-source branch that includes 2,000+ icons suitable for commercial and open-source projects licensed under CC BY 4.0.

Like premium Font Awesome icons, the free edition comes with distinct styles, including solid, regular, and brand-specific, to meet literally any design or dev needs. You can also access all free FA icons via their official GitHub repository.

Glyph Neue ↗

Glyph Neue by Icons8 is an icon pack with over 1,500+ modern, monochrome icons in SVG and PNG formats.

Icons8 provides icons for free with a link credit, or you can get more formats and sizes with a premium paid license.

All Glyph Neue icons are bold, sleek and perfect for illustrating interfaces and presentations. They are also easily accessible and can be used through the Icons8 API. Glyph Neue also provides a handy Figma file for everyone to use.

Google Material Icons ↗

Google Material Icons is probably the largest repository of free icons, offering a diverse collection of over 6,000+ open-source icons that are suitable for any design need. Material icons are available for free under the Apache license 2.0, allowing for unrestricted use and modification for both personal and commercial projects.

Icons can be customized in terms of size, color, and style, including border, shape, roundness, and type, allowing you to tailor them specifically to your project suite. And if this is not enough, Material Icons provides an icon font in addition to the standard SVG format.

Hero Icons ↗

Heroicons offers a compact set of SVG icons designed by the creators of Tailwind CSS and Tailwind UI. These 280+ icons come in four styles, including outline, solid, mini, and micro styles, all optimized for use with React and Vue.

Hero icons are free under the MIT license. They are specially designed to be easy to integrate and adapt to practically any screen and resolution.

Icon Park by ByteDance ↗

IconPark by ByteDance offers over 2,500+ free icons, available in SVG and PNG formats, with NPM packages for React Vue and Vue3. The icon set supports customization for multiple themes, stroke widths, and color schemes.

All icons are free to use and can be used under the Apache license 2.0, making them a perfect fit if you want to have the same icons on all platforms. The set comes with a popular GitHub repo.

Icon Hub ↗

Iconhub features a practical set of 3,200+ icons, including free and premium options in different styles and categories. The icon set is available under the CC 4.0 International license, making them suitable for use in both personal and commercial projects.

Iconhub offers a Figma plugin to help find and drag icons to the comfort of your Figma canvas.

Iconmonstr ↗

Iconmonstr set offers icons in flat (filled) and outline styles. The complete pack provides 4,700+ free-to-download icons, licensed under the CC3 international license, allowing use without major modification.

Ionicons ↗

Ionions is a lovely open-source icon set designed by the Ionic team for web, iOS, and Android. The set has 1,300+ icons crafted with a unique customization feature - all set icons have Material-styled and iOS-style icon versions.

Iconoir ↗

Iconoir is one of the most popular icon sets for UI design. It features an extensive collection of SVG icons designed in a consistent, minimalist style. With over 1,500+ icons available for free and licensed under the MIT license, allowing unrestricted use and modification.

The Iconoir website features a user-friendly search and filter system, making it easy to find and incorporate icons into their designs. All icons are available for React, Flutter, Vue, Framer, and Figma.

You can also find more information about the Iconoir set on their official GitHub repo.

Remixicons ↗

The Remix icon set provides over 2,800+ high-quality icons tailored for a sleek and an crispy interface feel. It is available for free under the Apache 2.0 license so, you can freely use, modify, and distribute these icons in personal or commercial projects.

Remix icons provide a comprehensive Figma community file and a GitHub repository.

Tabler Icons ↗

Tabler Icons offers over 4,900+ free and open-source icons for web applications and interfaces. The Tabler set is available under the Apache license 2.0, allowing unrestricted use for personal and commercial projects.

The set features a user-friendly website with categorized icons and a customization UI to help align Tabler icons with your brand, as well as a user-friendly free Figma plugin.

Lucide Icons ↗

Lucide Icons is a lightweight, scalable, and open-source pack with 1,400+ outline icons under the ISC license. The Lucide icon set offers a wide range of packages, including ones for React, Vue, Svelte, Angular, Solid, and more. The official site provides detailed documentation on all the available packages.

Majesticons ↗

Majesticons is a premium digital resource that offers a free, open-source version with neatly crafted icons for desktop and mobile interfaces. It includes 700+ scalable icons with a free Figma file.

MingCute Icons ↗

MingCute is a carefully designed icon pack with 2,900+ open-source icons. It provides regular updates as well as a premium animation package with a beautiful collection of interactive icons.

MingCute Icons are also available on the GitHub repo under the Apache 2.0 license.

Phosphor Icons ↗

Phosphoricons is probably our favorite icon set. It has over 9,000+ open-source icons available in six styles: thin, light, regular, bold, fill, and duotone. Phosporicons provides an official Figma plugin and Figma file, a Sketch plugin, and an official GitHub repo.

The set is well-maintained and perfectly matches popular open-source fonts, such as Inter, IBM Plex, Satoshi, Helvetica, or Open Sans.

PixelArt Icons ↗

PixelArt Icons offers a unique collection of over 480+ free pixel art icons, perfect for retro and minimalist UI design. Available under the MIT license, the set can be found on a GitHub repo, with all free icons that can be used and modified freely in personal and commercial projects.

The PixelArt Icons project also offers an extended collection of icons available in four styles as a premium edition.

Radix Icons ↗

Radix Icons is a crispy set of 300+ free icons. The set offers organized Figma and Sketch files, an NPM, and a GitHub repository to help integrate it into your project.

The Radix website also offers other solutions for designers and devs, such as Color palettes and UI components.

UIcons by Flaticon ↗

A free Flaticon set includes over 3,000 SVG and web font-based icons suitable for web, iOS, and Android interfaces. It is licensed under CC BY 4.0 and available as an organized Figma file.

UntitledUI Free Icons ↗

1,100+ free SVG icons for web and mobile UI design. Untitled UI Icons is a clean and neutral icon library that can be matched with any modern design interface. The free set is available as a professionally organized Figma file.

That's our list! If you haven't found your favorite icon library or think we've missed one, feel free to let us know.

✰ Bookmark this page if you want to receive an update on the new icon sets added.