v1.0.2 569+ Modular Vector & Font Icons for Web, iOS, Android, and Desktop • Free & Open Source (GPL-3.0)
Getting Started & Integration Guide

Haticons Tutorial

Learn how to install, import modular category stylesheets, compile with Sass, and build modern interfaces with Haticons.

1

Installation Options

Install via your favorite package manager or include from CDN

Haticons can be installed as an npm package in Node, Vite, Webpack, Next.js, or loaded directly via jsDelivr / UNPKG CDN.

A. Via Package Manager

bash / terminal 
# Install via npm
npm install haticons

# Install via yarn
yarn add haticons

# Install via pnpm
pnpm add haticons

B. Via CDN (Quickest for static sites)

Add the full minified stylesheet to your HTML <head>:

HTML 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/haticons@1.0.2/dist/css/haticons.min.css">
2

Basic HTML Usage

Standard markup, color utilities, and sizing multipliers

Use the <i> or <span> tag with the hi-[icon-name] class:

HTML 
<!-- Standard icons -->
<i class="hi-cart"></i>
<i class="hi-heart text-danger"></i>
<i class="hi-search text-primary"></i>

Style Variant Addon Classes

You can specify style variants either by appending suffixes (hi-*-fill, hi-*-outline, hi-*-sharp) or using modifier classes alongside base icons:

Variant Pattern Addon Class Suffix Live Preview
Fill (Default / Solid) .hi-*-fill or .hi-fill <i class="hi-heart-fill">
Outline .hi-*-outline or .hi-outline <i class="hi-heart-outline">
Sharp .hi-*-sharp or .hi-sharp <i class="hi-heart-sharp">

Built-in Size Modifiers

Class Multiplier Live Preview
.hi-sm 0.875x font size Small
.hi-md 1.15x font size Medium
.hi-lg 1.33x font size Large
.hi-xl 1.75x font size Extra Large
.hi-2x 2x font size 2x Size
.hi-3x 3x font size 3x Size
.hi-spin Continuous 360° spin animation Spinning
3

Modular Category CSS (Zero Waste)

Cut bundle size by loading only the categories your app requires

Unlike traditional monolithic icon fonts, Haticons splits all 569 icons into 14 distinct categories. You don't need to load the full 23 KB stylesheet if your project only uses a few icons!

Performance Tip: Loading only the categories you need reduces unused CSS to near zero and improves Google Lighthouse speed scores.

Option 1: Load a standalone category bundle

Includes font definition and all category icons in ~1.5 KB:

HTML 
<!-- Commerce & Payments only (~1.5 KB) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/haticons@1.0.2/dist/css/categories/commerce.min.css">

Option 2: Core + Category-only files (Recommended)

If you use multiple categories, load core.min.css once, then import category glyphs without duplicate @font-face blocks:

HTML 
<!-- 1. Core webfont & sizing utilities (< 1 KB) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/haticons@1.0.2/dist/css/core.min.css">

<!-- 2. Category glyphs -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/haticons@1.0.2/dist/css/categories/commerce-only.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/haticons@1.0.2/dist/css/categories/directional-only.min.css">
4

React & Vue 3 Components

First-class, typed component libraries with zero webfont payload

Haticons ships with 569 individual SVG components for React and Vue 3. Each component renders inline crisp vector paths with customizable size, color, and native SVG props.

A. React Component Usage (haticons/react)

React / TSX 
import React from "react";
import { HiCart, HiHeart, HiSearch } from "haticons/react";

export function HeaderCart() {
  return (
    <div className="d-flex gap-2">
      <button className="btn btn-primary d-flex align-items-center gap-1">
        <HiCart size={20} color="#ffffff" />
        <span>Checkout</span>
      </button>
      <HiHeart size={24} color="#ef4444" />
    </div>
  );
}

B. Vue 3 Component Usage (haticons/vue)

Vue 3 (Composition API) 
<script setup>
import { HiCart, HiHeart } from "haticons/vue";
</script>

<template>
  <div class="d-flex align-items-center gap-2">
    <button class="btn btn-primary d-flex align-items-center gap-1">
      <HiCart :size="20" color="#ffffff" />
      <span>Checkout</span>
    </button>
  </div>
</template>
5

Modern Auto-Import Bundler Resolver

Zero manual imports in Vite, Webpack, Rollup, and Nuxt

With unplugin-vue-components or unplugin-auto-import, use any Haticons component directly inside templates without writing explicit import statements:

vite.config.js 
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { HaticonsResolver } from "haticons/resolver";

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        HaticonsResolver({ framework: "vue", prefix: "Hi" })
      ]
    })
  ]
});
6

Custom Subsetting & Scan CLI

Generate minimal zero-waste CSS and SVG bundles with one command

Need only 10 specific icons for your landing page or web app? The haticons CLI tool generates a dedicated custom subset CSS and SVG collection.

Terminal 
# 1. Subset specific icons
npx haticons subset --icons=cart,heart,search,bell --out=./src/assets/haticons-subset

# 2. Automatically scan your workspace (.js, .jsx, .tsx, .vue, .html)
npx haticons scan --src=./src --out=./src/assets/haticons-subset

# 3. List all 569 icons and categories
npx haticons list
7

Animations & Duotone Engine

Built-in micro-animations and two-tone styling

Bring your interfaces to life using Haticons animation utilities and the modern duotone layer:

Class Behavior Live Preview
.hi-spin Continuous 360° rotation
.hi-pulse Gentle rhythmic pulsing heartbeat
.hi-bounce Dynamic attention-grabbing bounce
.hi-shake Alert / error notification shake
.hi-hover-rotate Smooth 90° spin on cursor hover
.hi-duotone Modern dual-tone visual depth
8

Sass / SCSS & LESS Workflow

Compile modular preprocessor partials into your existing asset architecture

In projects with a Sass or LESS pipeline (Vite, Webpack, Nuxt, Next, Vite-plugin-less), import partials directly from haticons/scss or haticons/less:

A. Sass / SCSS Modular Import

SCSS 
// Custom font path if needed
$hi-font-path: "~haticons/dist/fonts";
$hi-prefix: "hi-";

// Core font-face and classes
@import "haticons/scss/variables";
@import "haticons/scss/core";

// Only import needed categories
@import "haticons/scss/categories/commerce";
@import "haticons/scss/categories/communication";
@import "haticons/scss/categories/directional";

B. LESS Modular Import

LESS 
// Custom font path or prefix in LESS
@hi-font-path: "~haticons/dist/fonts";
@hi-prefix: ~"hi-";

// Core font-face and classes
@import "haticons/less/variables.less";
@import "haticons/less/core.less";

// Only import needed categories
@import "haticons/less/categories/commerce.less";
@import "haticons/less/categories/communication.less";
@import "haticons/less/categories/directional.less";
9

Pairing with boodoo Framework

Seamlessly integrate with buttons, forms, and input groups

Haticons is engineered to pair with boodoo CSS framework components:

A. Buttons with Icons

HTML 
<button class="btn btn-primary d-inline-flex align-items-center gap-1">
    <i class="hi-download"></i>
    <span>Download ZIP</span>
</button>

B. Search Input Group

HTML 
<div class="input-group">
    <span class="input-group-text"><i class="hi-search"></i></span>
    <input type="text" class="form-control" placeholder="Search...">
</div>
10

JavaScript / TypeScript API

Access icon dictionaries and codepoint lookups in code

Haticons includes a JS/TS module to query icon metadata, unicode codepoints, and category sets dynamically:

TypeScript / JavaScript 
import { icons, categories, getIcon, getByCategory } from 'haticons';

// Lookup specific icon
const cartIcon = getIcon('hi-cart');
console.log(cartIcon.content); // "\f063"

// Get all icons for a category
const directional = getByCategory('directional');
console.log(directional.length); // 16
11

Accessibility & Screen Readers

Best practices for decorative vs meaningful icons, screen reader support, and focus states

Icons alone can be ambiguous or completely silent to assistive technologies (screen readers like NVDA, JAWS, or VoiceOver). Proper accessibility patterns ensure all users have an equivalent experience.

A. Decorative Icons (With Visible Text)

When an icon accompanies visible label text, the icon is decorative. Always add aria-hidden="true" so screen readers ignore the glyph:

HTML 
<button class="btn btn-primary">
    <i class="hi-cart" aria-hidden="true"></i>
    <span>Add to Cart</span>
</button>

B. Icon-Only Buttons (Meaningful Icons)

When a button or link contains ONLY an icon (e.g. search, close, delete), you MUST supply an accessible name using aria-label or a .visually-hidden text span:

HTML 
<!-- Option 1: aria-label on interactive element -->
<button class="btn btn-outline-secondary" aria-label="Search icon catalogue">
    <i class="hi-search" aria-hidden="true"></i>
</button>

<!-- Option 2: Visually hidden text for screen readers -->
<button class="btn btn-danger">
    <i class="hi-trash" aria-hidden="true"></i>
    <span class="visually-hidden">Delete item</span>
</button>
12

Cross-Platform & Native Apps

Integration details for Web, iOS, Android, React Native, and Flutter

While web apps use our CSS webfont or modular SVG assets, mobile platforms have different rendering requirements:

Platform Recommended Asset Integration Method
Web (HTML / React / Vue) haticons.woff2 or dist/svg/*.svg CSS class <i class="hi-*"> or direct SVG inline import
React Native dist/icons/*.js or dist/svg/*.svg Use react-native-svg with icon.path data
Flutter dist/fonts/haticons.ttf or dist/svg/*.svg Load TTF as font family or use flutter_svg with standalone SVGs
iOS (SwiftUI / UIKit) dist/fonts/haticons.ttf or PDF/SVG assets Add TTF to Info.plist (UIAppFonts) or import SVGs into Asset Catalog
Android (Compose / XML) dist/fonts/haticons.ttf or Vector Drawables Place TTF in app/src/main/assets/fonts/ or convert SVGs to Vector Drawables
Copied to clipboard!