SVG Icon Names

You can use the Font Awesome Icon Name with the SVG + JS method to display the icons on your page.

Before You Get Started

Make sure you:

• Plan to use the SVG+JS method of Font Awesome
• Have your project set up with Font Awesome

Add Icons with the Icon Name

You can add any icon in any style with the icon name when using the SVG+JS method. Just add the class for the style you want to use to select the style of icon, then insert the icon name between the opening and closing <i> element.

Here are some examples:

<i class="fa-2x fa-solid fa-shake">starship-freighter</i>
<i class="fa-2x fa-thin fa-rotate-90">starfighter-twin-ion-engine-advanced</i>
<i class="fa-2x fa-sharp fa-solid fa-beat-fade" style="color: LightGreen;"
  >equals</i
>
<i class="fa-2x fa-regular fa-rotate-90">starfighter</i>
<i class="fa-2x fa-solid fa-fade" style="color: Orange;">:</i>
<i class="fa-2x fa-duotone fa-bounce">space-station-moon-construction</i>

Where do I find an icon’s name?

When searching for icons, the icon name is directly under the icon itself.

Or, if you have clicked on an icon, the icon name is in the icon preview modal.

Trouble getting your icons to show?

Be sure to double check the icon name when using this method of adding icons. An icon will not render if you have input a name that is not a Font Awesome icon or does not respect the following:

• icon names must be lower-case (ex. block-question, playstation, xbox)
• multi-word icon names must use kebab-case (ex. starship-freighter, space-station-moon-construction, starfighter-twin-ion-engine-advanced)