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. Icon names work with all the styling options as CSS classes as well.

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;">colon</i>
  <i class="fa-2x fa-duotone fa-solid fa-bounce">space-station-moon-construction</i>
  <i class="fa-2x fa-sharp-duotone fa-solid fa-flip">user-bounty-hunter</i>

If your icon isn’t showing, be sure to double-check the icon name:

• 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)