After finding an icon you want to use in a project, here's how to place it on the web, desktop, and elsewhere.
Make sure you’ve set up Font Awesome in your project and are ready to manage some mischief.
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:
fa- (meaning “font awesome” naturally!)| Style | Availability | Style class | @font-face weight | Looks like |
|---|---|---|---|---|
| Solid | Free Plan | fa-solid | 900 | |
| Regular | Pro Plans only | fa-regular | 400 | |
| Thin | Pro Plans only | fa-thin | 100 | |
| Light | Pro Plans only | fa-light | 300 | |
| Duotone | Pro Plans only | fa-duotone | 900 | |
| Brands | Free Plan | fa-brands | 400 |
We've updated many of our icon names in version 6 to adhere to our new naming conventions. 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.
<!-- Both of these code snippets will render the same icon. -->
<i class="fa-solid fa-cutlery"></i>
<i class="fa-solid fa-utensils"></i>
Aliases are only available with Web Fonts at this time. Aliases for SVG will be included in an upcoming alpha release.
Font Awesome is designed to be used with inline elements and we recommend sticking with a consistent element in your project. We prefer using i element with added Font Awesome classes: 1) style class and 2) icon name with the fa- prefix.
<!-- 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>
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.
When working in desktop applications, like Adobe Illustrator, Figma, and Sketch, you can use Font Awesome as a typeface in any text area. We have ligatures for each and every icon so you can type in the name of the icon you want and it will magically appear.
There is not a ligature-based desktop font available for Duotone icons at the moment. This is because they are made of two glyphs, which current font technology can't support. You'll need to add those by placing SVG files into your designs.
We also have a number of other ways to add Font Awesome icons, in case your situation calls for something specific: