At this time of the 21st century, no one can deny the essentiality of a decent UI design when talking about the performance of a user interface. Actually, web UI design has been one of the deciding factors in retaining potential customers. Your customers might easily close your web page if your website lacks sufficient and appropriate designing, while a carefully designed website can help convert prospects into real customers.
One important part of website UI design is icons. Icon fonts are icons made into web fonts with uniform styles that you can use conveniently everywhere within your website with normally an i tag with specific class. Icon fonts are important because they add vitality to your website UI.
Below are the top icon fonts that you can use in your web design, most of them are free for commercial use.
1. Icofont
Icofont is a library of beautifully designed and curated free icon set featuring more than 2,100 solid icons with up to 30 categories.
You can either download the full set of icons or select what you need and add them to your collection to generate your own customized icon font (which I personally recommend you do so) or download icons as individual SVG file and use them anywhere you want.
Icofont offers several ways of customizing the icon font: sizing, listing, flipping & rotating.
Basic usage:
<head>
<!-- include necessary css files -->
<link href="/your-path-to-icofont/css/icofont.min.css" rel="stylesheet">
</head>
<body>
<!-- initial scale -->
<i class="icofont-dart icofont-1x"></i>
<!-- scale 5 times -->
<i class="icofont-dart icofont-5x"></i>
<!-- rotate 90 degrees -->
<i class="icofont-arrow-right icofont-rotate-90"></i>
<!-- flip vertically -->
<i class="icofont-arrow-right icofont-flip-vertical"></i>
</body>Free for Commercial Use
Go To IcofontLicense: CC BY 4.0 & SIL OLF. But you don’t actually need to do attribution as there are embedded comments with necessary attribution within the Icofont files.
2. Ionicons
Ionicons is a beautifully designed premium open source icons collection with more than 1300 icons that you can use in your web apps, Android and iOS projects as well as desktop apps.
These hand crafted flat icons come with both SVG and web font files. Download their desginer pack as SVG files if you prefer not to use them as web font.
Each icon has a filled, outline and sharp variant that you can utilize to fit your modern web design needs. In addition to shape variant, Ionicons also provides cross platform specific variant capability, sizing of icons, colors of icons, and stroke weight of icons, which really adds flexibility to your web development.
Basic usage:
<head>
<!-- include necessary js files using CDN -->
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</head>
<body>
<!-- insert the icon with ion-icon tag and the icon name in the name attribute -->
<ion-icon name="heart"></ion-icon> <!--filled-->
<ion-icon name="heart-outline"></ion-icon> <!--outline-->
<ion-icon name="heart-sharp"></ion-icon> <!--sharp-->
</body>Free for Commercial Use
Go To IoniconsLicense: MIT, 100% Open Source and Free.
3. Bootstrap Icons
Bootstrap is known to us as the most popular, powerful, extensible frontend design toolkit and framework. Bootstrap Icons is a high quality icons library that was first released in 2019, and is now a thriving collection that ships with over 1600 icons and growing.
Though it’s a project of Bootstrap’s, but you are not confined to it, you are free to use them as a separate component that you can integrate into any projects. However, when coupled with Bootstrap, Bootstrap Icons is definitely a monster that you can make use of to spice up your web design.
Possible usage options: individual SVG, SVG sprite, web font and Figma Plugin .
Basic usage:
<head>
<!-- include necessary css using CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<!-- insert the icon and customize the icon with style attribute -->
<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>
</body>Free for Commercial Use
Go To Bootstrap IconsLicense: MIT. Read more about the license here: https://github.com/twbs/icons/blob/main/LICENSE.md
4. Font Awesome
Font Awesome is undoubtedly the largest player in the icon font industry. There are currently over 2,000 free scalable vector graphic icons including brand icons. According to SimilarTech , there are more than 4.5 million websites using Font Awesome including many top sites.
You can easily customize, style, size, rotate, animate the icons with the power of CSS (Cascading Style Sheet).
Font Awesome offers free solid and regular style with classic rounded corners, you can upgrade to their Pro plan ($79 / year) to get access to more styles like light, thin, duotone and also icons with sharp corners.
Basic usage:
<head>
<!-- include necessary css files -->
<link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">
<link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet">
<link href="/your-path-to-fontawesome/css/regular.css" rel="stylesheet">
<link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet">
</head>
<body>
<!-- uses solid style -->
<i class="fa-solid fa-user"></i>
<!-- uses regular style -->
<i class="fa-regular fa-user"></i>
<!-- uses brand style -->
<i class="fa-brands fa-github-square"></i>
</body>Free for Commercial Use
Go To Font AwesomeLicense: CC BY 4.0 & SIL OLF. But you don’t actually need to do attribution as there are embedded comments with sufficient attribution within the Icofont files.
5. Google Material Symbols (Material Icons)
Material Symbols, which was previously Material Icons, is a member of the Google Fonts family. It was once a separate library of free icons, but now it is completely integrated into the Google Fonts system, so you can use the icons just like using Google Fonts.
Backed by Google, Material Symbols are consolidated with a whopping 2500+ glyphs in a single font file with a wide range of design variants. Each symbol comes in three styles (Outlined, Rounded, Sharp) and four adjustable variable font styles (fill, weight, grade, and optical size).
By utilizing the power of Google Fonts API, you get all the benefits it has to offer, you can use it universally in your projects, whether web apps, android apps or iOS apps.
Available files: SVG, PNG and Figma Plugin .
Basic usage:
<head>
<!-- include the Symbols just like including Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,700,0,0" />
</head>
<body>
<!-- inserting the icon by icon name with icon style class -->
<span class="material-symbols-outlined">check_circle</span>
</body>Free for Commercial Use
Go To Material SymbolsLicense: Apache 2.0.
6. Material Design Icons
Material Design Icons is a growing icon collection that allows designers and developers targeting various platforms to download icons in the format, color and size they need for any project.
Strictly speaking, Material Design Icons is an extended version of Google Symbols which we can tell from its name, but it differs now in the way the icons are used, Material Design Icons are used the way common icon font is used - as web fonts. You can find more than Google Icons as this free icons collection is maintained and updated by a collective of passionate individuals and contributors. Extended icons are highlighted with an orange border.
Material Design Icons provides some helper classes to modify the look of the icons, including rotation, flipping, spinning, and icon set.
Available files: SVG, XML, XAML, and of course Webfont.
Basic usage:
<head>
<!-- include css using CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" />
<!-- OR -->
<!-- include css using selfhosted files -->
<link rel="stylesheet" href="/your-path-to-materialdesignicons/css/materialdesignicons.min.css" />
</head>
<body>
<!-- inserting the icon -->
<span class="mdi mdi-home"></span>
</body>Free for Commercial Use
Go To Material Design IconsLicense: MIT, Apache 2.0. Read their license information here: https://dev.materialdesignicons.com/license.
7. Line Awesome
Line Awesome is a collection of exquisitely crafted line icons which consists of over 1300 icons. It is a great free alternative icon font to Font Awesome as it covers the main Font Awesome icon set.
For each icon, there are two styles: regular and solid, another style is brand specific.
You can use these icons in your favorite design tools like Figma, Sketch, Photoshop, etc.
If your UI design fits better with line icons, Line Awesome free icon font is definitely a good option.
Basic usage:
<head>
<!-- include css using CDN -->
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css">
<!-- OR -->
<!-- include css using selfhosted files -->
<link rel="stylesheet" href="/your-path-to-line-awesome/css/line-awesome-font-awesome.min.css">
</head>
<body>
<!-- inserting the icon -->
<i class="ri-admin-line"></i>
<i class="ri-admin-fill"></i>
</body>Free for Commercial Use
Go To Line AwesomeLicense: Basically no limitation. More license information here: https://icons8.com/good-boy-license.
8. Remix Icon
Remix Icon is a free icon font which consists of more than 2000 finely designed and drawn open source neutral style vector icons in 16 categories for designers and developers.
These icons are designed and optimized with a 24x24 grid, each of them comes with two styles: Outlined and Filled.
Remix Icon offers icon font somewhat the same way as Icofont - you either download the whole icon pack within one single icon font or choose the ones you want and then export in a much smaller web font.
Basic usage:
<head>
<!-- include css using CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
</head>
<body>
<!-- inserting the icon -->
<i class="fi-[icon]"></i>
</body>Free for Commercial Use
Go To Remix IconLicense: Apache 2.0. Not for sale.
9. Boxicons
Boxicons is another elegantly crafted Google Material Design style icons library dedicated to serving UI designers and developers.
With over 30 categories and up to 1600 icons, Boxicons isn’t just about icon font, it goes a bit further with an additional feature: pre-built-in animation for icons, which is a prominent feature that sets Boxicons apart.
You can easily customize the icons on the fly within one simple panel after clicking the icon.
Basic usage:
<head>
<!-- include css using CDN -->
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<!-- inserting the icon -->
<i class='bx bx-user'></i>
<i class='bx bxs-user'></i>
<i class='bx bxl-facebook-square'></i>
</body>Free for Commercial Use
Go To BoxiconsLicense: MIT.
10. Foundation Icon Fonts
Foundation Icon Fonts 3, a Zurb Foundation project, is a small custom collection of 283 scalable geometric icons with round corners, thick line weights and natural angles.
With this icon font, you are able to use CSS to style the icons to match your UI design with your brand identity.
Basic usage:
<head>
<!-- include css using selfhosted files -->
<link rel="stylesheet" href="/your-path-to-foundation-icons/foundation-icons.css">
</head>
<body>
<!-- inserting the icon -->
<i class="fi-[icon]"></i>
</body>Go To Foundation Icon FontsLicense: License information is not available, use with discretion.
11. Elusive Icons
Basic usage:
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/elusive-icons/2.0.0/css/elusive-icons.min.css">
<link rel="stylesheet" href="/path-to-elusive-icons/css/elusive-icons.min.css">
</head>
<body>
<i class="el el-camera-retro"></i>
</body>Free for Commercial Use
Go To Elusive IconsLicense: SIL OFL 1.1.