# SVG Icon Names

Reference for Font Awesome SVG icon names and how to use them in your projects.

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

Make sure you:

- Plan to use [the SVG+JS method of Font Awesome](/web/dig-deeper/webfont-vs-svg.md)
- Have your project [set up with Font Awesome](/web.md#web-setup)

## Add Icons with the Icon Name

You can add any [icon](https://fontawesome.com/icons) in any [style](/web/dig-deeper/styles.md) with the icon name when using the SVG+JS method. Just add the [class for the style you want to use](/web/add-icons/how-to.md#families-styles) 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](/web/style.md) as CSS classes as well.

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

```html
<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`)