React Font Awesome Icons

Font Awesome is a second icon set next to Lucide. Reach for it when you need a brand logo, such as GitHub or LinkedIn, or when you prefer its filled style. AdminKit PRO for React includes the 2,163 icons of Font Awesome 7 Free: 1,422 solid, 169 regular and 572 brand icons.

Font Awesome icons are not React components. They come from a webfont: you write an <i> element with two classes, and the CSS draws the icon as a character of that font. There is nothing to import in your component.

ExampleCopy Anchor Link

<i className="fas fa-heart me-2" />
<i className="far fa-heart me-2" />
<i className="fab fa-github" />

How it is loadedCopy Anchor Link

The template installs @fortawesome/fontawesome-free (version 7.3.1). src/scss/app.scss loads its Sass files at the top, with @use, and src/main.tsx imports app.scss. So the classes work on every page.

The font files hold every icon, so tree shaking doesn't apply here: the browser downloads the whole font for each style you use, whether a page shows one icon or a hundred.

Icon stylesCopy Anchor Link

The first class picks the style, the second one the icon:

<i className="fas fa-paper-plane me-2" />
<i className="far fa-paper-plane me-2" />
<i className="fab fa-linkedin me-2" />
<i className="fab fa-instagram" />

Find an iconCopy Anchor Link

Search on fontawesome.com with the Free filter on, or open the Font Awesome page of the template (/icons-font-awesome). That page lists every icon of each style, from src/data/icons-fa-solid.json, icons-fa-regular.json and icons-fa-brand.json.

Add fa- in front of the name you find: paper-plane becomes fa-paper-plane. The free regular style has far fewer icons than the solid one, so check that the icon exists in the style you want.

To build the class from data, use a template string, as the orders table does for card brands:

<i className={`fab fa-cc-${method.toLowerCase()} me-1`} /> {method}

SizesCopy Anchor Link

An icon is as big as the text around it. AdminKit's text-sm and text-lg classes make it a little smaller or bigger. Font Awesome adds its own steps: fa-2xs, fa-xs, fa-sm, fa-lg, fa-xl and fa-2xl, and fa-1x to fa-10x for multiples of the font size.

<i className="fas fa-heart fa-sm me-2" />
<i className="fas fa-heart me-2" />
<i className="fas fa-heart fa-lg me-2" />
<i className="fas fa-heart fa-2x" />

Fixed widthCopy Anchor Link

Font Awesome 7 gives every icon the same width by default. AdminKit turns that off in src/scss/5-vendor/_fontawesome.scss, so each icon is as wide as its glyph, as in Font Awesome 6. When icons sit in a column, for example in a list, add fa-fw to give them all the same width so the text after them lines up. The demo page does this.

<div><i className="fas fa-house fa-fw me-2" />Home</div>
<div><i className="fas fa-bell fa-fw me-2" />Notifications</div>
<div><i className="fas fa-paper-plane fa-fw me-2" />Messages</div>

ColorsCopy Anchor Link

Icons take the text color of their parent. Bootstrap's text color classes change it:

<i className="fas fa-heart text-primary me-2" />
<i className="fas fa-heart text-secondary me-2" />
<i className="fas fa-heart text-success me-2" />
<i className="fas fa-heart text-danger me-2" />
<i className="fas fa-heart text-warning me-2" />
<i className="fas fa-heart text-info" />

AccessibilityCopy Anchor Link

• The webfont doesn't hide icons from screen readers. Add aria-hidden="true" to a decorative icon, as the connected apps on the settings page do: <span className="fab fa-github" aria-hidden="true" />.
• A button or link with only an icon needs an aria-label that names the action, with the icon aria-hidden:

<button type="button" className="btn btn-light" aria-label="Share on LinkedIn">
  <i className="fab fa-linkedin" aria-hidden="true" />
</button>

RelatedCopy Anchor Link

• Next.js Font Awesome icons: the same icons in AdminKit for Next.js
• Bootstrap 5 Font Awesome: Font Awesome in the HTML version
• Lucide icons: the main icon set, in the free and PRO versions
• Font Awesome icons demo