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