DEV Community

Cover image for How to Use Icon Fonts in Your Web Projects
Masum Parvej
Masum Parvej

Posted on • Originally published at hugeicons.com

How to Use Icon Fonts in Your Web Projects

#icon #iconfont #hugeicons #besticons

Icon font is a great choice when you need scalable icons with minimal setup. They work in all browsers, are easy to style, and keep your HTML clean. If you need icons that just work without slowing you down, icon fonts can be a great option.

This blog covers how to use icon fonts, write clean HTML, style them properly, and handle accessibility. It also talks about our picks on the best icon font libraries that are actually worth using.

Let’s get to it!

Why Have Icon Fonts Been Popular?

Icon fonts have been popular amongst both developers, designers, and even non-coders who use website builders for its scalability. You can adjust icons with the help of CSS, modifying their size, color, and shape. You only have to create relevant classes in your CSS.

Icon fonts are small in size, and thus they can load quite fast.

Icon fonts work like text, which gives you the ability to –

  • Change icon size using font-size
  • Adjust color with regular CSS
  • Add spacing or transitions without extra markup

How to use icon fonts

Now let’s walk through how to use icon fonts in a real project. From loading the font to handling accessibility, here’s how to set it up –

Load the Font
Most icon fonts include a CSS file and some font formats (.woff, .ttf, etc.). You can link the CSS directly or import it through your bundler.

We’ll use Hugeicons for example here –

For a JavaScript file:

This gives you access to a full set of icons using simple class names.

Add Icons in HTML

Once the font is loaded, place icons with standard HTML elements like this:

<i class="hi hi-user"></i>

<i class="hi hi-message-multiple-02"></i>
Enter fullscreen mode Exit fullscreen mode

The first class targets the font family. The second one picks the icon.

Style with CSS

Because the icons are just like fonts, you can style them like text. For example:

.hi {
  font-size: 20px;
  color: #444;
  margin-right: 6px;
}
Enter fullscreen mode Exit fullscreen mode

You can also change the icon sizes just like you’d change a font size:

.icon-sm { font-size: 16px; }
.icon-md { font-size: 24px; }
.icon-lg { font-size: 32px; }
Enter fullscreen mode Exit fullscreen mode

Then use them in your markup, like so:

<i class="hi hi-star icon-lg"></i>
Enter fullscreen mode Exit fullscreen mode

Accessibility

Although this part often gets ignored. But accessibility is very important.

If the icons are just visual, you can hide it from screen readers using this:

<i class="hi hi-star" aria-hidden="true"></i>
Enter fullscreen mode Exit fullscreen mode

However, when the icons adds meaning, give it a label:

<i class="hi hi-alert-circle" role="img" aria-label="Warning"></i>
Enter fullscreen mode Exit fullscreen mode

Accessibility support makes sure assistive tech understands it and reads the right info.

Use Icons in Buttons or Links

Icons often go inside buttons and links. Here’s how to make that work –

If there’s no visible text, but just icons, you can do it like this:

<button aria-label="Save">
  <i class="hi hi-save" role="img" aria-label="Save icon"></i>
</button>
Enter fullscreen mode Exit fullscreen mode

If the text is visible, do it like this:

<button>
  <i class="hi hi-save" aria-hidden="true"></i> Save
</button>
Enter fullscreen mode Exit fullscreen mode

This is clean for users with eyesight. And also accessible to everyone else.

Customize Your Icons

Once you’ve added icon fonts to your project, you can style them just like text. That’s where they really become flexible.

Color Classes

.icon-green::before { color: #008000; }
.icon-red::before { color: #ff0000; }
.icon-blue::before { color: #0000ff; }
.icon-yellow::before { color: #ffff00; }
Enter fullscreen mode Exit fullscreen mode

Size Classes

.icon-12::before { font-size: 12px; margin-right: 3px; }
.icon-24::before { font-size: 24px; margin-right: 6px; }
.icon-36::before { font-size: 36px; margin-right: 9px; }
.icon-48::before { font-size: 48px; margin-right: 12px; }
Enter fullscreen mode Exit fullscreen mode

Example Markup

<span class="hi hi-facebook icon-blue icon-36">Like Us On Facebook</span>
Enter fullscreen mode Exit fullscreen mode

Positioning Icons
If you want the icon to appear after your text instead of before, just use the ::after pseudo-element in your CSS. The same logic applies.

Icon-Only Elements
If you're showing an icon without visible text, still include some text in the HTML for screen readers and SEO. You can hide it like this:

.icon {
  text-indent: -9999px;
}
Enter fullscreen mode Exit fullscreen mode

Apply this to the element itself, not the ::before, so the icon stays visible but the text gets pushed off-screen.

Common Mistakes

Here are the common pitfalls that you might encounter with icon fonts –

  • No aria-label on important icons
  • Missing role="img" when needed
  • Adding unused icons and bloating your font file
  • Using old hiding tricks like text-indent: -9999px
  • Ignoring font sizing in responsive layouts Avoid them to get the best output from icon fonts.

Best Icon Font Libraries to Choose From

Here are our curated list of icon libraries that offer icons in icon font format -

Hugeicons


Hugeicons is a fast and reliable icon font you can drop into any project. You get access to over 40,000 icons, with 4,000 available for free. They’re organized into 59 categories and designed in 9 consistent styles, so finding what you need is easy.

It’s a solid choice if you care about design quality and want a simple, flexible setup without extra tooling.

Hugeicons is available under a custom license with a free tier for personal and commercial use. Optimized with only the icons you include, the sizes are usually ~20-100KB. You can also add aria-hidden="true" and use or hidden text to ensure screen reader compatibility. And it works across all modern browsers including Chrome, Firefox, Safari, and Edge.

How to Use Hugeicons Icon Font:

Include the font CSS in the

section:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@hugeicons/core-free-font@latest/css/core.css" />
Enter fullscreen mode Exit fullscreen mode

Then, place the icon in the

using the class:
<i class="hug-smile"></i>
Enter fullscreen mode Exit fullscreen mode

Bootstrap Icons


Bootstrap Icons is the official icon set developed by the Bootstrap team. It’s designed to fit with the Bootstrap components and styling.

You’ll get over 2,000 SVG-based icons that are clean, responsive, and easy to scale. If you're already using Bootstrap, this library is plug-and-play and keeps everything visually consistent.

It's lightweight, easy to integrate, and actively maintained with updates that align with Bootstrap's evolution.

How to Use Bootstrap icons’ Icon Font:

Include the font CSS in the

section:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
Enter fullscreen mode Exit fullscreen mode

Then, add the icon like this:

<i class="bi bi-alarm"></i>
Enter fullscreen mode Exit fullscreen mode

Streamline Icons


Streamline is one of the most comprehensive icon collections available today, originally launched over a decade ago. It includes over 100,000 icons, covering everything from user interface elements to emoji, illustrations, and animated assets.

Their Core and Ultimate sets are especially valuable if you're looking for scalable, consistent icon fonts. Icons are available in multiple styles, from thin to bold, and they offer formats like SVG, PNG, web fonts, and more.

Streamline is a long-term library you can scale with.

How to Use Streamline Icons’ Icon Font:

You’ll need a Streamline account to generate your custom icon font, then include the generated CSS link in your project.

<link rel="stylesheet" href="/your-exported-streamline-font.css">
Enter fullscreen mode Exit fullscreen mode

Use the icons with the custom class names you configured, like:

<i class="streamline-icon icon-home"></i>
Enter fullscreen mode Exit fullscreen mode

Iconic Icons

Iconic Icons is a clean, modern icon library built by James McDonald and Orman Clark - the same duo behind many successful design products. The library includes over 1,300 pixel-perfect icons, with a focus on precision and usability.

The free set covers common UI needs, while the Pro set expands into more specific use cases. Icons are updated regularly and are available in Figma, SVG, PNG, and font formats.

If you value consistency and minimalism, Iconic Icons is a solid pick.

How to Use Iconic icons Icon Font:

Download and include the CSS link provided after export:

<link rel="stylesheet" href="/path-to-iconic-font.css">
Enter fullscreen mode Exit fullscreen mode

Then add the HTML icon class:

<i class="iconic-check"></i>
Enter fullscreen mode Exit fullscreen mode

Final Thoughts

Icon fonts are still a solid choice for developers and designers who want scalable icons with simple setup. They are quick to add, easy to style and work in all major browsers. You do not need build tools or extra dependencies to get started.

With this guide, we tried to show you how to load icon fonts, use them in HTML style them with CSS and make them accessible. We’ve also mentioned what to avoid while doing so, so your setup stays clean and easy to maintain.

If your project needs speed control and flexibility, icon fonts are still worth using. Pick a good library, use it right and you are good to go.

Top comments (0)