Skip to main content

Icons (Haticons)

Boodoo officially pairs with and supports Haticons—an open-source, modular vector and font icon library crafted by Pebble Benders with 569+ icons, zero runtime dependencies, and category-first stylesheets.

Official Pebble Benders Companion Library
569+ Icons

Haticons was engineered alongside Boodoo to provide seamless responsive sizing, CSS custom property theming, and modular category loading.

haticons.com GitHub

Quick Installation

You can load Haticons via high-speed CDN or install it locally through your preferred package manager.

1. CDN (Drop into HTML <head>)

<!-- Drop Haticons stylesheet in your <head> alongside Boodoo -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/haticons@1.0.1/dist/css/haticons.min.css">

2. Package Manager (npm / yarn / pnpm)

# Install via npm
npm install haticons

# Or via pnpm
pnpm add haticons

# Or via yarn
yarn add haticons

3. Importing in JavaScript / Bundlers

// In main.js / index.js / App.jsx
import 'haticons/dist/css/haticons.min.css';

Modular Category Stylesheets

Unlike monolithic icon libraries that force you to ship hundreds of kilobytes of unused glyphs, Haticons provides individual category stylesheets so you only download what you use:

Category Description Example Icons
UI & Interface Navigation, toggles, controls, layouts, and menus hi-search, hi-menu, hi-close, hi-settings
Brands & Social Logos, tech stacks, developer tools, and networks hi-github, hi-react, hi-vue-js, hi-bootstrap
Commerce & Payments Carts, checkout, wallets, receipts, and currencies hi-cart, hi-credit-card, hi-wallet
Feedback & Status Checkmarks, warnings, shields, notifications, and alerts hi-check, hi-warning, hi-shield-check, hi-bell
Directional & Arrows Chevrons, carets, arrows, and directional indicators hi-arrow-right, hi-chevron-down, hi-chevron-left
Files & Folders Documents, folders, uploads, and file management hi-file, hi-folder, hi-download, hi-trash
Time & Calendar Clocks, dates, stopwatches, and scheduling hi-calendar, hi-clock
Users & People User profiles, accounts, groups, and identities hi-user, hi-users

Icon Syntax & Variants

Render icons using an <i> or <span> tag with the hi-[name] class identifier. Haticons provides base, fill, outline, and sharp variants:

hi-star

hi-star-fill

hi-star-outline

hi-star-sharp

hi-heart-fill

hi-check-circle-fill

<!-- Standard icons -->
<i class="hi-star"></i>
<i class="hi-star-fill"></i>
<i class="hi-star-outline"></i>
<i class="hi-star-sharp"></i>
<i class="hi-heart-fill text-danger"></i>
<i class="hi-check-circle-fill text-success"></i>

Responsive Sizing with Boodoo

Haticons integrates seamlessly with Boodoo's .icon token hierarchy, scaling proportionally with typography or fixed token sizes from .icon-xs (12px) to .icon-2xl (48px):

.icon-xs

.icon-sm

.icon-md

.icon-lg

.icon-xl

.icon-2xl

<i class="hi-bolt icon-xs"></i>   <!-- 0.75rem / 12px -->
<i class="hi-bolt icon-sm"></i>   <!-- 1rem / 16px -->
<i class="hi-bolt icon-md"></i>   <!-- 1.25rem / 20px -->
<i class="hi-bolt icon-lg"></i>   <!-- 1.75rem / 28px -->
<i class="hi-bolt icon-xl"></i>   <!-- 2.25rem / 36px -->
<i class="hi-bolt icon-2xl"></i>  <!-- 3rem / 48px -->

Dynamic Color Theming

Because Haticons consumes currentColor, applying any Boodoo contextual color utility immediately styles the icon while remaining fully reactive to runtime theme switching:

<i class="hi-shield-check text-primary icon-lg"></i>
<i class="hi-shield-check text-secondary icon-lg"></i>
<i class="hi-shield-check text-success icon-lg"></i>
<i class="hi-shield-check text-danger icon-lg"></i>
<i class="hi-shield-check text-warning icon-lg"></i>
<i class="hi-shield-check text-info icon-lg"></i>
<i class="hi-shield-check text-muted icon-lg"></i>

Component Integrations

Haticons is engineered to integrate naturally across all Boodoo components:

Learn more 
<button type="button" class="btn btn-primary d-inline-flex align-items-center gap-2">
  <i class="hi-download" aria-hidden="true"></i>
  <span>Download</span>
</button>

<a href="#" class="icon-link">
  <span>Learn more</span>
  <i class="hi-arrow-right" aria-hidden="true"></i>
</a>

Form Controls & Input Groups

<div class="input-group">
  <span class="input-group-text"><i class="hi-search" aria-hidden="true"></i></span>
  <input type="text" class="form-control" id="demoSearchField" name="demoSearchField" placeholder="Type to search...">
</div>

Alerts with Icons

<div class="alert alert-info d-flex align-items-center" role="alert">
  <i class="hi-info-alt alert-icon me-2" aria-hidden="true"></i>
  <div><span>A new version of Boodoo and Haticons is available for download.</span></div>
</div>

Click any card below to copy the HTML icon class to your clipboard:

hi-haticons
hi-bolt
hi-shield-check
hi-cart
hi-phone
hi-paintbox
hi-calendar
hi-clock
hi-folder
hi-file
hi-chart
hi-github
Explore All 569+ Icons on haticons.com →