Icons

Lucide Icons

Lucide icons are rendered as inline SVGs. Add an <i> element with a data-lucide attribute and call lucide.createIcons() to render them.

<i data-lucide="home"></i>
<i data-lucide="settings"></i>
<i data-lucide="user"></i>
<i data-lucide="search"></i>

<!-- Initialize icons -->
<script src="dist/webfonts/lucide/js/lucide.min.js"></script>
<script>lucide.createIcons();</script>

Icon sizing

Control icon size with named scale classes or pixel-based classes. All sizing works through the --lucide-size CSS custom property.

<i data-lucide="star" class="icon-xs"></i>
<i data-lucide="star" class="icon-sm"></i>
<i data-lucide="star" class="icon-md"></i>
<i data-lucide="star" class="icon-lg"></i>
<i data-lucide="star" class="icon-xl"></i>
<i data-lucide="star" class="icon-2xl"></i>

Named scale

Pixel scale

Use .icon-{px} for exact pixel sizing. Available values: 12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 80, 96.

<i data-lucide="heart" class="icon-16"></i>  <!-- 16px -->
<i data-lucide="heart" class="icon-32"></i>  <!-- 32px -->
<i data-lucide="heart" class="icon-64"></i>  <!-- 64px -->

Stroke width

Control the stroke thickness of Lucide icons with .icon-stroke-{weight}.

Icon colors

Icons inherit currentColor by default. Override with .icon-{color} using any theme color token, or use .icon-inherit to explicitly inherit.

<i data-lucide="heart" class="icon-primary icon-lg"></i>
<i data-lucide="check-circle" class="icon-success icon-lg"></i>
<i data-lucide="alert-triangle" class="icon-danger icon-lg"></i>

<!-- Inherit from parent text color -->
<span class="text-purple">
  <i data-lucide="star" class="icon-inherit"></i>
</span>

Alignment

Align icons vertically within text using alignment helpers.

<p>
  <i data-lucide="mail" class="icon-middle"></i>
  Inbox messages
</p>

Responsive sizing

All named icon sizes support responsive prefixes. Use {breakpoint}:icon-{size} to change icon size at different viewports.

<!-- Small on mobile, large on desktop -->
<i data-lucide="home" class="icon-sm lg:icon-lg"></i>

Font Awesome

ArchCSS bundles Font Awesome locally. Use the standard Font Awesome class syntax - no CDN link required.

<i class="fa fa-home"></i>
<i class="fa fa-user"></i>
<i class="fa fa-cog"></i>

Configuration

Icon features are controlled by the flags and tokens baked into the compiled build.

Local bundles. Both Lucide and Font Awesome are shipped with the ArchCSS package - no external CDN requests are made. Building from SCSS source to toggle these flags yourself is coming in a future release.