The 50 Best Free Icon Fonts for UI Design

Instead of typical letters and numbers, an icon font contains glyphs, symbols, or pictograms. They are the simplest way for a UI designer to add an icon set to a design project.

One of the key perks of using an icon font is its scalability. They can be resized without losing quality, making them perfect for responsive web design, as they can be scaled – with CSS media queries – up for desktop or down for mobile. On top of that, icon fonts are fully customizable, allowing you to easily adjust the size and edit the color to fit the layout and color scheme of a particular UI design.

Icon fonts are incredibly easy to add to any web design or mobile app project using CSS. You load the font file using @font-face, and using standard CSS rules, you can set the font-size, color, padding, margin, or other properties.

Although very popular, icon fonts do also have their pitfalls. Ian Feather has discussed his reasons for switching from an icon font to SVG, and CSS Tricks have outlined some considerations when choosing between icon fonts or SVG icons. Both favor SVG.

As a counter-argument, Pictonic has said that icon fonts are 10% faster than SVG. These are just things you should consider before you use icon fonts.

To ensure that your icons always load correctly and have reliable fallbacks for browsers that don’t support @fontface, you should take a look at the guidelines set out by the Filament Group, Bulletproof Accessible Icon Fonts.

Eva Icons Open Source UI Icon Set (480 Icons)

If you’re designing a new interface or you want to showcase your product’s features, check out this great (and free) icon font. These open-source icons feature actions and items, from arrows and attachments to color palettes. With over 480 icons, it’s the whole package!

Trendy Thin Line Icon Font (100 Icons, Envato Elements)

There’s nothing like minimalism to highlight your product’s quality, and this icon set is an excellent choice for your next project. They’re vectors and fully editable in Adobe Illustrator. From frequency icons to beautiful outline toggle icons, you’ll have everything you need!

Open Iconic Open Source Set (223 Icons)

Stop worrying about making your icons work with your text formatting. This open-source icon set comes with over 230 practical and technical icons in different formats, from SVG to WOFF. You can quickly size them to fit your needs with CSS, and they’re perfectly legible even at 8px.

Pictypo Icon Font by Typogama (Envato Elements)

Pictypo offers fun and engaging icons rendered with dingbat fonts. The rounded style adds a dash of friendliness, and you’ll get plenty to work with. From weather icons to office symbols, Pictypo offers everything you need. The lines are bold, so they look good on large displays, too.

Ionicons Icon Pack for Ionic Framework (1,100+ Icons)

Ionicons is a well-rounded icon pack for the Ionic framework. You will get numerous app icons (notifications, arrows, food, and more), as well as icons featuring renowned brands’ logos (e.g., Pinterest). Depending on your needs, you can download outline, filled, and/or sharp icon renders as SVG and web font files.

Icoframe Wireframe Icon Set (60 Icons, Envato Elements)

Make your next project more dynamic and engaging with Icoframe – beautiful and modern wireframe icons. You’ll get 60 minimalist wireframe icons, from symbols for login pages to grid, timeline, and typography icons. The design is very intuitive, and you can easily customize them in Adobe Illustrator.

Font Awesome (1,500+ Icons)

Font Awesome is a massive and very popular icon set. They offer over 1,600 free icons, all of which have been meticulously designed to showcase friendliness and ease of use. You’ll find everything from AWS and other brand logos to business and lifestyle icons in the FA gallery.

Wirebet Wireframe Fonts (Envato Elements)

Wirebet fonts are a great choice if you want to streamline your workflow and integrate engaging icons into your materials without booting up your design suite. You’ll get various technical icons, from symbols for portfolio pages to arrows and device icons. Wirebet is perfect for wireframes!

Cryptofonts (1,250+ Free Icons, Icon Font)

Line Awesome Icon Font (1,380 Icons)

Add modern line icons to your materials in one line of code with Line Awesome. It improves upon Font Awesome’s offer and lets you add all sorts of icons (from accessibility and building to arrows and brand icons) to your website (via CDN), Figma prototypes, and much more.

The Crafty Font Collection (24 Fonts, Envato Elements)

The Crafty Collection offers 24 engaging and fun fonts that you can use to make your next design a lot more exciting. From stars and stripes to rough outlines and sprinkles, The Crafty Collection offers font combinations that play well together so your designs will always look cohesive and interesting.

Dashicons, the WordPress Admin Icon Font (300 Icons)

Dashicons is an icon font for WordPress. If you want to emulate the signature WP style in other projects, you’ll love it. It’s very technical in style, but it gets the point across and is easy to use. From brand logos to TinyMCE, run wild!

Remix Icon Open Source Library (2,000+ Icons)

Remix Icon is an open-source icon library with over 2,200 icons. All of the icons are free for both personal and commercial use. You’ll see a wide variety of icons, from thin outline icons to filled symbols for extra emphasis. Get them as PNG, SVG, or code.

Themify Icon Font (320 Icons)

Inspired by Apple iOS, Themify icons offer over 300 beautiful minimalist icons. From arrows to app icons, you’ll get everything you need as either an icon font for easier workflow integration (SVG included), or a plugin for WordPress. Themify icons are perfect for modern UI design!

Dripicons Line-Icon Font v.2 (200 Icons)

If you don’t want garden-variety line icons, check out Dripicons. This free icon font is incredibly easy to use, but the best part is that they’re beautiful! You’ll get a set of versatile bold line icons, from arrows and tech to education and music.

GitHub’s Octicons Icons (180 Icons)

If you like GitHub’s aesthetic, you’re going to love their Octicons. These icons are available in two sizes (16px and 24px), and they also include some special-case icons like pull requests. You can toggle between outline and filled icons, and they work perfectly with different programming languages.

Foundation Icon Fonts (280 Icons)

Get going with just a few lines of code and Foundation icons. This collection comprises different sets, from general icons to accessibility icons, so there’s something for every project. Foundation icons work as a web font, so you don’t have to jump through hoops.

Devicons Iconic Font for Developers (78 Icons)

Devicons is an icon font made specifically for developers and a wide variety of projects. The font contains 85 icons, mainly brand logos for services like Dropbox and coding platforms like PostgreSQL. Devicons can be integrated by adding a single line of code into the project’s header HTML.

The Elegant Icon Font (360 Icons)

Beautiful, elegant, and engaging – this icon font contains over 300 diverse icons. They’re simple to integrate and use, especially if you’ve used Elegant Themes or the Divi builder in the past. From file icons to arrows, you will find everything you need in this set.

Feather Open Source Icon Set (282 Icons)

Keep it simple and accessible with Feather, a vast collection of open-source icons. From arrows and chevrons, to app UI icons, Feather is an excellent addition to your standard design toolbox. You can customize the size, stroke width, and color of every icon, so they fit your branding perfectly.

Typicons Icon Font (336 Icons)

Simple, friendly, and perfect for a wide variety of projects, Typicons are a great choice. They are embedded in a web font, so they’re easy to use. You’ll get 336 icons, from cogs and arrows to brand logos. You can pick between filled icons or outlines.

IcoMoon’s Free Icon Pack (490 Icons)

Freshen up your standard icon toolkit with IcoMoon’s free icons. You’ll get 490 vector icons that are perfect for app and web UI. These icons are simple and minimalist with a bit of personality. From home icons to smiley faces, it’s the whole package!

Genericons Neue Icon Font (100 Icons)

Simplify your design with Genericons, a set of simple and minimalist icons for web and app design. They work perfectly for blogs or simple websites where you want to keep the focus on your messaging. You’ll get plenty of icons for key features, from sitemaps to RSS feeds.

Icon-Works Free Icon Font (136 Icons)

A free and stylish icon font, Icon-Works is an excellent choice if you want to make your next design stand out. You’ll get plenty of beautiful, retina-ready icons that you can customize. They’re scalable, so you don’t even have to worry about re-sizing them.

Microns Icon Font (108 Icons)

Microns icons take pride in their simplicity. The collection provides icons for the most common use cases, from charts and arrows to navigation icons. They’re easy to encode, and the file itself is only 5kb, so they’re perfect for use across your project portfolio.

Stroke 7 Icon Font (202 Icons)

Straight out of the Pixeden workshop, Stroke 7 is a collection of thin-line icons. The set offers 200+ icons that can be customized with CSS. They were inspired by the early 00 icons, so they’re not going to stand out and draw attention away from your main message.

Stroke Icon Font Vol.1 (80 Icons)

Petras Nargela designed a set of 80 stroke icons, and it’s free. These beautiful icons are fresh, clean, and ready to spice up your designs. You can download them as PSD, AI, or web font files. If you’re need something different, you’ve found it!

Material Design Iconic Font

Created by Google, the Material Design icon set contains plenty of icons you can use across your projects. You just have to add one line of code to your website, and you’re good to go! Since community members constantly add their own icons, there’s plenty of variety.

Minimal Outline Essential Icons (77 Icons)

If your UI is minimalist, choose icons that follow the same aesthetic cues. This minimal outline icon set contains over 70 clean and sharp icons. The vectors are scalable, and you can easily change the icons’ colors to fit your style. You can download them free in various formats.

Tonicons Outline Icons (300 Icons)

Tonicons is a fantastic set of icon fonts that are not just easy to use but beautiful, too! You’ll get 300 clean and minimalist outline icons for app and web UI design. From all kinds of files to messaging icons, the Tonicons set covers every single use case.

CSSans Pro CSS Font

CSSans is a colorful and dynamic CSS font. Composed of multiple colorful geometric elements that add vibrancy to your designs, CSSans is all about personality! You’ll get unique uppercase and lowercase characters, numerals, and other symbols. It’s infinitely customizable and grabs attention from the get-go!

MFG Labs Icon Set (120 Icons)

MFG Labs icon set was originally designed for an internal project, but the team couldn’t resist sharing this versatile icon set. They’re easily embeddable and customizable with CSS. You’ll find all the icons you need to create the right atmosphere for your next design.

Ligature Symbols Icon Font (240 Icons)

Ligature Symbols is an icon font with fun and minimalist icons. Individual icons can be combined to create ligatures (e.g., combine table and cell icons to create grids), improving this collection’s usability. You’ll find everything you need, so give this free icon font a go!

Devicon 2.0 Programming & Development Icon Font (78 Icons)

Devicons are friendly, dev-friendly icons created to represent programming and development tools. From Chrome and Confluence to Django and Adobe Illustrator, you’ll find the icon you’ve been looking for. You can easily copy-paste them into your projects by using either the font versions or SVG versions.

Mini Icon Font Set (80 Icons)

Simple and clean, these mini icons are perfect for a wide variety of projects, particularly those more formal in tone. This icon collection contains 80 precisely made icons in both PSD and icon font formats. From download/upload symbols to location and weather icons, this set offers every icon you need!

Helium Icon Set & Font (100 Icons)

Taras Shypka’s Helium icon set offers plenty of icons. Not only do they come in every format imaginable, but you can also use them as an icon font. You’ll get 112 icons with fine-shaded lines that add gloss. Helium is definitely an aesthete’s choice!

Gonzocons 2.0 Line Icons (100 Icons)

The Gonzocons set designed by Jan Rajtoral offers 100 line icons that perfectly replicate modern icon design trends. From simplistic arrows to buoyant hearts and hourglasses, Gonzocons icons definitely have a personality. You can get them as SVG files or as a web font for easier integration with your app/site.

Map Icon Marker Font (180 Icons)

Map Icons is an icon font made for Google Maps and Places. You can easily customize the icons with CSS, and pick from over 175 icons. From general icons for hair salons to icons for activities, this set gives you plenty to choose from to make your next project amazing.

Outlined Icons Webfont (150 Icons)

Simple and fun, this set offers 150 outlined icons. You can get them as PSD, AI, SVG, or web font files. Dario Ferrando’s icons are inspired by contemporary web icon design, but they have plenty of personality to make your next project stand out and wow your audience.

Infinity Space Icons (230 Icons)

Shoot for the moon with these beautiful space icons. You’ll get over 230 symbols, including spaceships, planets, and more! They’re very easy to use as they’re a dingbat font, and if you start typing the numbers, you’ll find the entire solar system.

Weather Themed Icon Font (222 Icons)

If accurate forecasts are an imperative for your next project, you’ll love this set of weather-themed icons. With over 200 icons (including specialty icons like 28 lunar phases), you’ll be ready to create something amazing! You can easily customize them with CSS to fit your needs.

Meteocons Weather Icon Font (40 Icons)

Get 40+ minimalist and friendly weather icons with Meteocons. This set offers every format imaginable, from SVG to desktop and web fonts. They’re free to use personally and commercially, and you can even create your custom font with the icons you frequently use. Icon updates are free too!

Stackicons Social Icon Font (75 Icons)

Add more color to your designs with Stackicons, a collection of over 60 updated icons featuring brand logos, from Dribbble to Reddit. They’ll add more personality to your standard design kit. You can choose regular icons, different rounded variations, or square icons, and there’s something for everyone!

Socialicious Social Media Icon Library (74 Icons)

If you’re on the hunt for incredible social icons, check out Socialicious. It gives you social media icons in font form, so they’re incredibly easy to use and even easier to customize. Integrate them with a single line of code, and customize them with CSS.

Mono Social Icons Font (100 Icons)

Engaging and dynamic, Mono Social are social media icons with a fun personality. You can use them for free and pick one of the three presentation options (rounded, circle, regular) to fit your style. Use them with CSS, HTML, and SCSS. They’re free for personal and commercial use.

Fontfabric Social Media Icons Pack (74 Icons)

Created by Jelio Dimitrov, Socialico is a package of 74 vibrant and engaging social media icons. They’re packaged as a web font, so every character on your keyboard generates a beautiful icon with plenty of presentation alternates. Since these font icons are free, add them to your toolbox!

Overall, icon fonts are a handy tool for UI designers wanting to add a unique touch to their designs. With their scalability and ease of use, icon fonts are still a popular choice for designers of all skill levels and backgrounds.