Icons

Linea UI does not ship its own icon set. Instead, the library is designed to work seamlessly with any icon font or SVG icon library. Pick whichever fits your project and drop it in.

Recommended icon libraries

Any icon library that renders via CSS classes on an <i> element works out of the box with Linea UI components. Here are three popular choices:

  • Font Awesome — 2,000+ free icons across solid, regular, and brand styles.
  • Bootstrap Icons — 2,000+ open-source icons designed to pair with Bootstrap or any project.
  • Heroicons — hand-crafted SVG icons by the Tailwind CSS team, available as React components or plain SVG.

The examples on this page use Font Awesome Free.

Loading Font Awesome

Add the Font Awesome stylesheet to your page via CDN or install it as a package.

CDN

index.htmlhtml
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />

npm

Terminalshell
npm install @fortawesome/fontawesome-free

Then import the CSS in your entry point:

index.jsjavascript
import "@fortawesome/fontawesome-free/css/all.min.css";

Basic usage

Add the icon class to an <i> element. Font Awesome classes follow the pattern fa-{style} fa-{name}, where style is fa-solid, fa-regular, or fa-brands.

index.htmlhtml
<i class="fa-solid fa-check"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-brands fa-github"></i>
<i class="fa-solid fa-magnifying-glass"></i>

Sizing

Font Awesome icons scale with font-size. Use Linea UI typography utilities to resize, or apply Font Awesome’s own sizing classes like fa-lg, fa-2x, fa-3x.

index.htmlhtml
<i class="fa-solid fa-star text-body-sm"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star fa-lg"></i>
<i class="fa-solid fa-star fa-2x"></i>
<i class="fa-solid fa-star fa-3x"></i>

Color

Icons inherit the current text color. Apply any Linea UI text-color utility to change it.

index.htmlhtml
<i class="fa-solid fa-circle-check text-success"></i>
<i class="fa-solid fa-triangle-exclamation text-warning"></i>
<i class="fa-solid fa-circle-xmark text-danger"></i>
<i class="fa-solid fa-circle-info text-info"></i>

With components

Icons work naturally inside Linea UI components. Place an <i> element alongside text or inside buttons, alerts, and badges.

index.htmlhtml
<button class="ln-button ln-button--primary">
  <i class="fa-solid fa-download" aria-hidden="true"></i>
  Download
</button>

<button class="ln-button ln-button--outline">
  <i class="fa-solid fa-gear" aria-hidden="true"></i>
  Settings
</button>

<button class="ln-button" aria-label="Delete">
  <i class="fa-solid fa-trash" aria-hidden="true"></i>
</button>

Accessibility

Decorative icons should include aria-hidden="true" to hide them from screen readers. If the icon conveys meaning on its own (no adjacent text label), add a role="img" and an accessible label instead.

index.htmlhtml
<!-- Decorative icon next to text — hide from AT -->
<button>
  <i class="fa-solid fa-trash" aria-hidden="true"></i>
  Delete
</button>

<!-- Standalone icon — provide a label -->
<button aria-label="Delete">
  <i class="fa-solid fa-trash" role="img" aria-label="Delete"></i>
</button>