# Next.js Font Awesome Icons Next.js Font Awesome icons in AdminKit PRO: the Font Awesome 7 Free webfont, loaded by the root layout, as plain markup that works in server components. > This feature is only available in **AdminKit PRO**. [Learn more](/pricing/#nextjs). Lucide covers most interface icons. Font Awesome fills the gaps: brand logos such as GitHub, Slack or Google, and a filled solid style. AdminKit PRO for Next.js comes with the 2,163 icons of Font Awesome 7 Free: 1,422 solid, 169 regular and 572 brand icons. You don't import these icons. Font Awesome is a webfont: an `` element with a style class and an icon class shows the icon, drawn by the CSS as a character of the font. Because it is plain markup, Font Awesome needs no `"use client"`. Write the `` straight into a page. Pages in the App Router are server components, and the icon is part of the HTML that Next.js builds for them. ## Example ```html ``` ```tsx code title="src/app/(dashboard)/projects/page.tsx" import { pageMetadata } from "@/lib/site"; export const metadata = pageMetadata("/projects"); export default function ProjectsPage() { return (

); } ``` ## How it is loaded The CSS loads once, for the whole app. The root layout, `src/app/layout.tsx`, imports `@/scss/app.scss`, and that file loads the Sass of `@fortawesome/fontawesome-free` (version 7.3.1) at the top with `@use`. Every page inherits the root layout, so every page can use the classes. Tree shaking doesn't apply to a webfont. Each style is one font file with all its icons, and the browser downloads it once a page shows an icon in that style. ## Icon styles The first class chooses the style, the second the icon: | Class | Style | Icons | | --- | --- | --- | | `fas` | Solid | 1,422 | | `far` | Regular (outlined) | 169 | | `fab` | Brands | 572 | ```html ``` ```tsx code ``` ## Find an icon Find the icon on [fontawesome.com](https://fontawesome.com/search) with the Free filter on. You can also open `/icons-font-awesome` in the template, which lists every icon per style from `src/data/icons-fa-solid.json`, `icons-fa-regular.json` and `icons-fa-brand.json`. The class is the name with `fa-` in front: `paper-plane` gives `fa-paper-plane`. Many icons exist in the solid style only, because the free regular style is much smaller. Check the style before you use one. When the icon name comes from data, build the class with a template string. The orders table shows the card brand of each order this way: ```tsx {method} ``` ## Sizes By default, an icon matches the size of the text around it. AdminKit's `text-sm` and `text-lg` classes make it a bit smaller or larger. Font Awesome has its own scale as well: `fa-2xs`, `fa-xs`, `fa-sm`, `fa-lg`, `fa-xl` and `fa-2xl`, plus `fa-1x` to `fa-10x` for multiples of the font size. ```html ``` ```tsx code ``` ## Fixed width Out of the box, Font Awesome 7 makes all icons equally wide. `src/scss/5-vendor/_fontawesome.scss` switches that off, so an icon takes the width of its own glyph, as it did in Font Awesome 6. For icons stacked in a column, add `fa-fw`: they get the same width again, and the text next to them lines up. The demo page uses it for its lists. ```html
Home
Notifications
Messages
``` ```tsx code
Home
Notifications
Messages
``` ## Colors The icon uses the text color of its parent. A Bootstrap text color class gives it another one: ```html ``` ```tsx code ``` ## Accessibility - Screen readers can still reach a webfont icon. Give a decorative one `aria-hidden="true"`, as the connected apps on the settings page do: `