Jun 24, 2024
by
Dmitriy Bunin
Best free UI free icons for web design and development
The best 27 free icon sets for designers and developers
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 UI 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.
1. Personality and branding in UI 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 aesthetics 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 elements. Using same icons for same functionality elements will make your brand look super put-together. It's like having a signature style – people will recognize it's you right away.
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 your product actual functionality.
So when you're picking your icon squad, they should fit right in, be easy to spot, and actually make sense.
2. User-centered context for UI 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.
The heart icon is a classic example. You'll often need an outlined heart for "like this" and a filled heart for "you've liked this." But don't stop there! Think about all the places where a little icon transformation could add more clarity to your UI.
3. UI 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.
By picking a set that's already consistent, you're basically giving yourself a head start. You'll save time and avoid headaches, and your design will thank you for it. Remember, the goal is to make your UI shine, not to become a full-time icon wrangler. So choose wisely, and let free icons do the heavy lifting for you!
Note: For consistency, avoid mixing different icon styles, even if they belong to the same set. Additionally, ensure that icons representing the same action and metaphors use consistent shapes throughout the UI.
4. Solid (flat) icons vs. Outlined Icons in UI design
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.
Note: For optimal performance of the free icon pack, ensure it includes both filled and outlined variants of key icons, such as stars, hearts, bookmarks, etc. These icons are often used for common actions and typically require both variants in larger systems.
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 all that cool stuff we talked about earlier? Yeah, that's your checklist for picking the perfect set.
Think about it:
Does the set match your brand's personality?
Can the icons pull double-duty with different weights or styles?
Are they consistent enough to look like a happy icon family?
Use these questions as your compass to guide you to the icon set that's not just good but perfect for your project.
So, ready to embark on your icon adventure? Let's dive into our curated list.
✰ Make sure to bookmark this page and revisit it for new free icons added. 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 UI type or 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 popular development frameworks, including 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.
Super Basic Icons ↗
Super Basic Icons is a sleek and simple collection of outline icons. The icon set includes 512 free icons that are ready to use with your favorite design tools, Sketch and Figma. Each icon in the collection has live vector editing capabilities, helping designers and developers fine-tune stroke details with precision.
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 an icon customization interface to help you adjust Tabler icons to match your brand. The Tabler icon pack also includes a free, user-friendly Figma plugin for dragging and dropping icons.
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, and Solid.
The official site provides detailed documentation on all the available code packages and icon styles.
Majesticons ↗
Majesticons is a premium digital resource that offers extensive open-source and free icon collections for web and mobile interfaces. The pack includes 700+ scalable SVG icons and comes with a structured free Figma file.
MingCute Icons ↗
MingCute is a carefully designed icon pack with over 2,900+ open-source icons. The library provides regular updates as well as premium packages with beautifully animated icons.
The MingCute free 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 with detailed documentation on each icon.
The set is well-maintained and perfectly matches with popular open-source Google fonts, such as Inter, IBM Plex, Satoshi, Helvetica, or Open Sans. Phosphor icons are huge and versatile, so they're our favorite free icon set. We highly recommend you try them.
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 itself is a full-fledged design system, and its website offers other solutions for designers and developers, such as free color palettes and UI components.
UIcons by Flaticon ↗
The Flaticon free set includes over 3,000 SVG and web font-based icons for designing Web, iOS, and Android interfaces. It is licensed under CC BY 4.0 and available as an organized free Figma file.
UntitledUI Free Icons ↗
The UntitledUI icon set includes 1,100+ free SVG icons for designing web and mobile interfaces. The icon set is ultra clean and minimal, providing icons in neutral tones that can be used for any UI.
Best Figma plugins for UI icons in Figma
In addition to free icon sets, we've gathered a directory of the best free Figma plugins for UI icons. Figma plugins can also be incredibly helpful when working with interface and design system icons.
Without further ado. Here's a list of some of the best Figma plugins to help you find icons for your projects:
Feather Icons - Free Feather icons plugin.
Iconify - Vast library of over 100,000 free icons from different open-source icon projects sources.
Material Design Icons - A plugin that lets you browse and insert Google's Material icons directly into your Figma projects.
Heroicons - A plugin with a free set of minimal-styled icons available in different sizes.
Nucleo - The plugin offering a free collection of versatile icons, which you can drag and drop directly into your canvas.
Phosphor Icons - A flexible icon library that provides icons in different weights, strokes, and fill styles.
Eva Icons - A plugin includes 480+ consistent icons with easy drag-and-drop functionality.
Iconscout - Iconscout plugin helps you browse and import free icons, illustrations, and 3D assets directly into Figma.
Tabler Icons - A plugin that provides access to over 550 free and open-source icons.
Ionicons - An easy to use plugin to populate your designs with beautiful Ionicons icons.
Looking for more Figma plugins?
If you looking for more plugins to enhance your workflow in Figma, be sure to explore our ultimate list of The test Figma plugins for UI Design and design systems.
→ See the Best Figma Plugins for UI design.
That's our list! If you haven't found your favorite icon library already or think we've missed a set that must be on this page, feel free to let us know.
✰ Bookmark this page if you want to receive an update on the new icons and sets added.
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 UI 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.
1. Personality and branding in UI 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 aesthetics 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 elements. Using same icons for same functionality elements will make your brand look super put-together. It's like having a signature style – people will recognize it's you right away.
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 your product actual functionality.
So when you're picking your icon squad, they should fit right in, be easy to spot, and actually make sense.
2. User-centered context for UI 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.
The heart icon is a classic example. You'll often need an outlined heart for "like this" and a filled heart for "you've liked this." But don't stop there! Think about all the places where a little icon transformation could add more clarity to your UI.
3. UI 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.
By picking a set that's already consistent, you're basically giving yourself a head start. You'll save time and avoid headaches, and your design will thank you for it. Remember, the goal is to make your UI shine, not to become a full-time icon wrangler. So choose wisely, and let free icons do the heavy lifting for you!
Note: For consistency, avoid mixing different icon styles, even if they belong to the same set. Additionally, ensure that icons representing the same action and metaphors use consistent shapes throughout the UI.
4. Solid (flat) icons vs. Outlined Icons in UI design
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.
Note: For optimal performance of the free icon pack, ensure it includes both filled and outlined variants of key icons, such as stars, hearts, bookmarks, etc. These icons are often used for common actions and typically require both variants in larger systems.
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 all that cool stuff we talked about earlier? Yeah, that's your checklist for picking the perfect set.
Think about it:
Does the set match your brand's personality?
Can the icons pull double-duty with different weights or styles?
Are they consistent enough to look like a happy icon family?
Use these questions as your compass to guide you to the icon set that's not just good but perfect for your project.
So, ready to embark on your icon adventure? Let's dive into our curated list.
✰ Make sure to bookmark this page and revisit it for new free icons added. 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 UI type or 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 popular development frameworks, including 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.
Super Basic Icons ↗
Super Basic Icons is a sleek and simple collection of outline icons. The icon set includes 512 free icons that are ready to use with your favorite design tools, Sketch and Figma. Each icon in the collection has live vector editing capabilities, helping designers and developers fine-tune stroke details with precision.
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 an icon customization interface to help you adjust Tabler icons to match your brand. The Tabler icon pack also includes a free, user-friendly Figma plugin for dragging and dropping icons.
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, and Solid.
The official site provides detailed documentation on all the available code packages and icon styles.
Majesticons ↗
Majesticons is a premium digital resource that offers extensive open-source and free icon collections for web and mobile interfaces. The pack includes 700+ scalable SVG icons and comes with a structured free Figma file.
MingCute Icons ↗
MingCute is a carefully designed icon pack with over 2,900+ open-source icons. The library provides regular updates as well as premium packages with beautifully animated icons.
The MingCute free 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 with detailed documentation on each icon.
The set is well-maintained and perfectly matches with popular open-source Google fonts, such as Inter, IBM Plex, Satoshi, Helvetica, or Open Sans. Phosphor icons are huge and versatile, so they're our favorite free icon set. We highly recommend you try them.
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 itself is a full-fledged design system, and its website offers other solutions for designers and developers, such as free color palettes and UI components.
UIcons by Flaticon ↗
The Flaticon free set includes over 3,000 SVG and web font-based icons for designing Web, iOS, and Android interfaces. It is licensed under CC BY 4.0 and available as an organized free Figma file.
UntitledUI Free Icons ↗
The UntitledUI icon set includes 1,100+ free SVG icons for designing web and mobile interfaces. The icon set is ultra clean and minimal, providing icons in neutral tones that can be used for any UI.
Best Figma plugins for UI icons in Figma
In addition to free icon sets, we've gathered a directory of the best free Figma plugins for UI icons. Figma plugins can also be incredibly helpful when working with interface and design system icons.
Without further ado. Here's a list of some of the best Figma plugins to help you find icons for your projects:
Feather Icons - Free Feather icons plugin.
Iconify - Vast library of over 100,000 free icons from different open-source icon projects sources.
Material Design Icons - A plugin that lets you browse and insert Google's Material icons directly into your Figma projects.
Heroicons - A plugin with a free set of minimal-styled icons available in different sizes.
Nucleo - The plugin offering a free collection of versatile icons, which you can drag and drop directly into your canvas.
Phosphor Icons - A flexible icon library that provides icons in different weights, strokes, and fill styles.
Eva Icons - A plugin includes 480+ consistent icons with easy drag-and-drop functionality.
Iconscout - Iconscout plugin helps you browse and import free icons, illustrations, and 3D assets directly into Figma.
Tabler Icons - A plugin that provides access to over 550 free and open-source icons.
Ionicons - An easy to use plugin to populate your designs with beautiful Ionicons icons.
Looking for more Figma plugins?
If you looking for more plugins to enhance your workflow in Figma, be sure to explore our ultimate list of The test Figma plugins for UI Design and design systems.
→ See the Best Figma Plugins for UI design.
That's our list! If you haven't found your favorite icon library already or think we've missed a set that must be on this page, feel free to let us know.
✰ Bookmark this page if you want to receive an update on the new icons and sets added.
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 UI 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.
1. Personality and branding in UI 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 aesthetics 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 elements. Using same icons for same functionality elements will make your brand look super put-together. It's like having a signature style – people will recognize it's you right away.
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 your product actual functionality.
So when you're picking your icon squad, they should fit right in, be easy to spot, and actually make sense.
2. User-centered context for UI 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.
The heart icon is a classic example. You'll often need an outlined heart for "like this" and a filled heart for "you've liked this." But don't stop there! Think about all the places where a little icon transformation could add more clarity to your UI.
3. UI 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.
By picking a set that's already consistent, you're basically giving yourself a head start. You'll save time and avoid headaches, and your design will thank you for it. Remember, the goal is to make your UI shine, not to become a full-time icon wrangler. So choose wisely, and let free icons do the heavy lifting for you!
Note: For consistency, avoid mixing different icon styles, even if they belong to the same set. Additionally, ensure that icons representing the same action and metaphors use consistent shapes throughout the UI.
4. Solid (flat) icons vs. Outlined Icons in UI design
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.
Note: For optimal performance of the free icon pack, ensure it includes both filled and outlined variants of key icons, such as stars, hearts, bookmarks, etc. These icons are often used for common actions and typically require both variants in larger systems.
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 all that cool stuff we talked about earlier? Yeah, that's your checklist for picking the perfect set.
Think about it:
Does the set match your brand's personality?
Can the icons pull double-duty with different weights or styles?
Are they consistent enough to look like a happy icon family?
Use these questions as your compass to guide you to the icon set that's not just good but perfect for your project.
So, ready to embark on your icon adventure? Let's dive into our curated list.
✰ Make sure to bookmark this page and revisit it for new free icons added. 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 UI type or 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 popular development frameworks, including 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.
Super Basic Icons ↗
Super Basic Icons is a sleek and simple collection of outline icons. The icon set includes 512 free icons that are ready to use with your favorite design tools, Sketch and Figma. Each icon in the collection has live vector editing capabilities, helping designers and developers fine-tune stroke details with precision.
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 an icon customization interface to help you adjust Tabler icons to match your brand. The Tabler icon pack also includes a free, user-friendly Figma plugin for dragging and dropping icons.
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, and Solid.
The official site provides detailed documentation on all the available code packages and icon styles.
Majesticons ↗
Majesticons is a premium digital resource that offers extensive open-source and free icon collections for web and mobile interfaces. The pack includes 700+ scalable SVG icons and comes with a structured free Figma file.
MingCute Icons ↗
MingCute is a carefully designed icon pack with over 2,900+ open-source icons. The library provides regular updates as well as premium packages with beautifully animated icons.
The MingCute free 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 with detailed documentation on each icon.
The set is well-maintained and perfectly matches with popular open-source Google fonts, such as Inter, IBM Plex, Satoshi, Helvetica, or Open Sans. Phosphor icons are huge and versatile, so they're our favorite free icon set. We highly recommend you try them.
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 itself is a full-fledged design system, and its website offers other solutions for designers and developers, such as free color palettes and UI components.
UIcons by Flaticon ↗
The Flaticon free set includes over 3,000 SVG and web font-based icons for designing Web, iOS, and Android interfaces. It is licensed under CC BY 4.0 and available as an organized free Figma file.
UntitledUI Free Icons ↗
The UntitledUI icon set includes 1,100+ free SVG icons for designing web and mobile interfaces. The icon set is ultra clean and minimal, providing icons in neutral tones that can be used for any UI.
Best Figma plugins for UI icons in Figma
In addition to free icon sets, we've gathered a directory of the best free Figma plugins for UI icons. Figma plugins can also be incredibly helpful when working with interface and design system icons.
Without further ado. Here's a list of some of the best Figma plugins to help you find icons for your projects:
Feather Icons - Free Feather icons plugin.
Iconify - Vast library of over 100,000 free icons from different open-source icon projects sources.
Material Design Icons - A plugin that lets you browse and insert Google's Material icons directly into your Figma projects.
Heroicons - A plugin with a free set of minimal-styled icons available in different sizes.
Nucleo - The plugin offering a free collection of versatile icons, which you can drag and drop directly into your canvas.
Phosphor Icons - A flexible icon library that provides icons in different weights, strokes, and fill styles.
Eva Icons - A plugin includes 480+ consistent icons with easy drag-and-drop functionality.
Iconscout - Iconscout plugin helps you browse and import free icons, illustrations, and 3D assets directly into Figma.
Tabler Icons - A plugin that provides access to over 550 free and open-source icons.
Ionicons - An easy to use plugin to populate your designs with beautiful Ionicons icons.
Looking for more Figma plugins?
If you looking for more plugins to enhance your workflow in Figma, be sure to explore our ultimate list of The test Figma plugins for UI Design and design systems.
→ See the Best Figma Plugins for UI design.
That's our list! If you haven't found your favorite icon library already or think we've missed a set that must be on this page, feel free to let us know.
✰ Bookmark this page if you want to receive an update on the new icons and sets added.
Whatever icon set you choose, it will be easy to integrate with Frames X, our design system, and the UI kit. Frames X is the world's largest and most advanced UI library, offering a white-label approach to icon management.
To integrate an icon pack into your project, you only need to add the set to Frames X as a separate page. Make sure that each icon is a component, and that's it!
To learn more, click the button below or the Preview button.
Best Figma plugins for UI design and design systems
Best practices for UI color palettes in Figma
WYSIWYG UI: How to design a text editor in Figma
Frames X v2.6: Universal UI kit and component library
Frames X v2.5: Largest UI kit in the world updated
Figma tips and tricks to work efficiently
Frames X v2.4: Typography variables, new components and charts
Frames X v2.3: Enhanced tools for data-driven design