Skip to content

SVG Icon Names

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

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="icon-padding fa-2x fa-solid fa-shake fa-starship-freighter"></i>
<i class="icon-padding fa-2x fa-thin fa-rotate-90 fa-starfighter-twin-ion-engine-advanced"></i>
<i class="icon-padding fa-2x fa-sharp fa-solid fa-beat-fade fa-equals" style="color: LightGreen;"></i>
<i class="icon-padding fa-2x fa-regular fa-rotate-90 fa-starfighter"></i>
<i class="icon-padding fa-2x fa-solid fa-fade fa-colon" style="color: Orange;"></i>
<i class="icon-padding fa-2x fa-duotone fa-bounce fa-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.

Font Awesome 6 installed and being activated in Font Explorer X on Mac OS X

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

Font Awesome 6 installed and being activated in Font Explorer X on Mac OS X