Docs Web Add Icons

How To Add Icons

Here are the basics on Font Awesome icons and how to add them to your web projects.

First Things First!

Make sure you’ve:

# Basics

You can place Font Awesome icons just about anywhere. We've tried to make it so that icons will take on the characteristics and blend in with surrounding text naturally.

To add an icon, you need to know two bits of information:

  1. the shorthand class name for the style you want to use
  2. the icon name, prefixed with fa- (meaning "font awesome" naturally!)

There are 6 styles of Font Awesome - Each has a unique class name and font-weight:

Style Availability Style class @font-face weight Looks like
Solid Free Plan fa-solid 900
Regular Pro Plans only fa-regular 400
Light Pro Plans only fa-light 300
Thin Pro Plans only fa-thin 100
Duotone Pro Plans only fa-duotone 900
Brands Free Plan fa-brands 400

# Add Icons to HTML

Font Awesome is designed to be used with inline elements and we recommend that you stick with a consistent element in your project. We recommend using <i> element with the Font Awesome CSS classes for the style class for the style of icon you want to use, and the icon name class with the fa- prefix for the icon you want to use.

Here's an example:

<!-- This example uses <i> element with: 
1. the `fa-solid` style class for solid style
2. the `user` icon with the `fa-` prefix -->
<i class="fa-solid fa-user"></i>

<!-- Or you can use a <span> element, with classes applied in the same way -->
<span class="fa-solid fa-user"></span>

Stay on target with those CSS rules!

When using our SVG framework, remember that DOM elements with Font Awesome classes are replaced with injected <svg> elements by default. Be sure that your CSS rules target the right element.

# Aliases

We've updated many of our icon names in version 6 to make them more universal and consistent. But we wanted to make sure not to break your existing code so we made aliases for renamed icons that will allow them to work with either the old or new names.

And you can use the old or new name for styles as well. So you can still use fas, far, fal, fad, fab, and have fat be the new Thin!

<!-- All of these code snippets will render the same icon thanks to aliases. -->
<i class="fa-solid fa-cutlery"></i>
<i class="fa-solid fa-utensils"></i>
<i class="fas fa-utensils"></i>

# Alternate Ways to Add Icons

We also have a number of other ways to add Font Awesome icons, in case your situation calls for something specific:

# When using Web Fonts

# When using SVGs

You're viewing the Version 6 Beta

It's all the awesome of 5 but now more six-y! Version 6 brings over 13,000 icons across 5 styles - including the new Thin style! - and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!