FABCONS — SVG Icon Set

Setup

Add the FABCONS stylesheet alongside FAP CSS:

<link rel="stylesheet" href="fabcons.min.css">

Then use any icon with a <span>:

<span class="fabcons-search" aria-hidden="true"></span>

Navigation & Arrows

Actions

Communication

Media & Files

Status & Feedback

Social & People

Commerce

UI & Settings

Code & Dev

Icons in Buttons

<button>
  <span class="fabcons-search" aria-hidden="true"></span> Search
</button>
<button data-outline>
  <span class="fabcons-plus" aria-hidden="true"></span> Add item
</button>
<button type="reset">
  <span class="fabcons-trash" aria-hidden="true"></span> Delete
</button>

Sizing

FABCONS scale with font-size — no extra classes needed.

<span style="font-size: 1rem;">
  <span class="fabcons-heart" aria-hidden="true"></span>
</span>
<span style="font-size: 2rem;">
  <span class="fabcons-heart" aria-hidden="true"></span>
</span>
<span style="font-size: 3rem;">
  <span class="fabcons-heart" aria-hidden="true"></span>
</span>

Color Inheritance

Icons inherit currentColor from their parent.

<span style="color: var(--fap-primary);">
  <span class="fabcons-star" aria-hidden="true"></span>
</span>
<span style="color: var(--fap-danger);">
  <span class="fabcons-heart" aria-hidden="true"></span>
</span>
<span style="color: var(--fap-success);">
  <span class="fabcons-check" aria-hidden="true"></span>
</span>

SVG Sprite (Alternative)

FABCONS also ships an SVG sprite for inline <svg> usage:

<!-- Reference the sprite -->
<svg width="24" height="24">
  <use href="fabcons.svg#search"></use>
</svg>

<svg width="24" height="24">
  <use href="fabcons.svg#heart"></use>
</svg>

All 87 Icons