Components

Icons

Use dependency-free inline SVGs or bring your preferred optional icon library.

Components guideCopy-ready referencev0.7.0 current

Utilities

Icons

Boobstrap remains library-agnostic, but Lucide is the recommended default and every official documentation example uses it. Lucide’s restrained current-color strokes fit the framework without per-icon CSS. Add .bs-icon to normalize size and alignment; use .bs-icon-sm, .bs-icon-lg, or .bs-icon-xl for scale.

HTML · Lucide marker

<i data-lucide="plus" class="bs-icon bs-icon-lg" aria-hidden="true"></i>

Install Lucide beside Boobstrap, import only the icons the page uses, and replace data-lucide markers after rendering. Named imports keep the icon bundle focused:

Shell · JavaScript

npm install lucide

import { Heart, Plus, Star, createIcons } from "lucide";
createIcons({ icons: { Heart, Plus, Star } });

Accessibility: decorative icons should use aria-hidden="true"; meaningful icons need an accessible label or visible text.

Icon sizes

Icons size relative to surrounding text by default; use a modifier when the icon needs deliberate visual emphasis.

Small Default Extra large

HTML · Icon sizes

<div class="bs-flex bs-flex-wrap bs-items-center bs-gap-6">
  <span class="bs-inline-flex bs-items-center bs-gap-2"><i data-lucide="plus" class="bs-icon bs-icon-sm" aria-hidden="true"></i> Small</span>
  <span class="bs-inline-flex bs-items-center bs-gap-2"><i data-lucide="plus" class="bs-icon" aria-hidden="true"></i> Default</span>
  <span class="bs-inline-flex bs-items-center bs-gap-2"><i data-lucide="plus" class="bs-icon bs-icon-xl" aria-hidden="true"></i> Extra large</span>
</div>

Icons inside controls

Hide a decorative SVG from assistive technology and put the control's accessible name on the button.

HTML · Accessible icon buttons

<div class="bs-flex bs-flex-wrap bs-gap-3">
  <button class="bs-btn bs-btn-primary" type="button"><i data-lucide="plus" class="bs-icon" aria-hidden="true"></i>Create</button>
  <button class="bs-btn bs-btn-secondary bs-btn-icon" type="button" aria-label="Add to favorites"><i data-lucide="heart" class="bs-icon" aria-hidden="true"></i></button>
</div>

Default

Choose Lucide for new Boobstrap interfaces so applications and documentation share one recognizable icon vocabulary.

Sizing

The base icon is 1em. Size modifiers stay aligned with text and buttons without hard-coded pixel dimensions.

Names

Decorative icons use aria-hidden="true". Icon-only controls need an accessible name on the interactive element.

Icon sizing

Icon utilities use em, so an icon follows the surrounding text or button size without a separate breakpoint system.

Class	Rendered size
`.bs-icon`	1em with normalized current-color stroke.
`.bs-icon-sm`	0.875em
`.bs-icon-lg`	1.25em
`.bs-icon-xl`	1.5em