# React Font Awesome Icons React Font Awesome in AdminKit PRO: solid, regular and brand icons from the Font Awesome 7 Free webfont, written as an i element with two classes. > This feature is only available in **AdminKit PRO**. [Learn more](/pricing/#react). 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 `` element with two classes, and the CSS draws the icon as a character of that font. There is nothing to import in your component. ## Example ```html ``` ```tsx code ``` ## How it is loaded 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 styles The first class picks the style, the second one the icon: | Class | Style | Icons | | --- | --- | --- | | `fas` | Solid | 1,422 | | `far` | Regular (outlined) | 169 | | `fab` | Brands | 572 | ```html ``` ```tsx code ``` ## Find an icon Search on [fontawesome.com](https://fontawesome.com/search) 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: ```tsx {method} ``` ## Sizes 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. ```html ``` ```tsx code ``` ## Fixed width 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. ```html
Home
Notifications
Messages
``` ```tsx code
Home
Notifications
Messages
``` ## Colors Icons take the text color of their parent. Bootstrap's text color classes change it: ```html ``` ```tsx code ``` ## Accessibility - 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: `