Docs · Icons · Font Awesome Free 7.3.1

Icons

1,992 Font Awesome Free icons as plain SVG files. Use them as images, as CSS masks that take your text color, or inline.

Attribution required

Font Awesome Free icons are licensed under CC BY 4.0. Credit Font Awesome wherever you use them, for example in your footer, credits page or the source comment the SVG files already carry. Use this exact text:

License

Icons by Font Awesome, CC BY 4.0. Font Awesome Pro icons are not available on htmltool.io.

SVG paths

Every icon is a standalone SVG at svgs/<style>/<name>.svg. The name is the Font Awesome name, such as house or magnifying-glass.

https://cdn.htmltool.io/free/7.3.1/svgs/solid/house.svg

Icon styles
Style	Icons	Example	Notes
solid	1,422	`svgs/solid/house.svg`	Filled icons. The default style.
regular	169	`svgs/regular/heart.svg`	Outlined versions of a subset of the solid icons.
brands	572	`svgs/brands/github.svg`	Logos. Check each brand's own trademark guidelines.

Some icons exist in more than one style (heart is in solid and regular). The icons gallery shows which styles each icon has.

As an image

The simplest option. The icon keeps its own color (black), so use this when you don't need to recolor it. Give it an alt when it carries meaning, or alt="" when it sits beside a text label.

index.html

<!-- Icons by Font Awesome, CC BY 4.0: https://fontawesome.com/license/free -->
<img src="https://cdn.htmltool.io/free/7.3.1/svgs/solid/house.svg" width="24" height="24" alt="Home">

CSS mask (follows currentColor)

Use the SVG as a mask over a block filled with currentColor. The icon then takes the text color of its parent, including hover and dark mode, with no inline SVG in your markup.

icons.css

/* Icons by Font Awesome, CC BY 4.0: https://fontawesome.com/license/free */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask: var(--icon) center / contain no-repeat;
}
.icon-house { --icon: url("https://cdn.htmltool.io/free/7.3.1/svgs/solid/house.svg"); }

Note

A masked <span> has no text alternative. Mark it aria-hidden="true" beside a visible label, or give it role="img" and an aria-label when it stands alone.

Inline SVG

Paste the file contents straight into your HTML when you want to style parts of it or avoid a request. The paths use fill="currentColor", so they follow the text color too. Keep the license comment that comes with every file.

house.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="24" height="24" aria-hidden="true">
  <!--! Font Awesome Free 7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2026 Fonticons, Inc. -->
  <path fill="currentColor" d="…"/>
</svg>

Every icon's detail page has the complete SVG, sized and colored, ready to copy or download.

Metadata

metadata/icons.json lists every icon, keyed by name, with its label, Unicode code point, search terms, available styles and the raw SVG for each style. Use it to build your own picker or search.

https://cdn.htmltool.io/free/7.3.1/metadata/icons.json

No icon font

cdn.htmltool.io hosts the SVGs and the metadata only. There is no css/ or webfonts/ folder, so <i class="fa-solid fa-house"> markup won't render from this CDN. Use one of the SVG recipes above instead.

Attribution

Font Awesome Free icons are released under CC BY 4.0(opens in a new tab). That means:

Credit Font Awesome somewhere a visitor or reader can find it, such as a footer or credits page.
Keep the  comment inside SVGs you copy or download. It is the attribution travelling with the file.
Only Font Awesome Free is available here. Font Awesome Pro icons are not available on htmltool.io, and nothing on this site links to them.

footer.html

<p>Icons by <a href="https://fontawesome.com">Font Awesome</a>, CC BY 4.0 (<a href="https://fontawesome.com/license/free">license</a>)</p>