♾️ Hicons for Hugo SVG icons Support

Hugo Icons plugin for easy-to-use SVG icons from open-source vendors Lucide and Feather — no bloated layouts

hicons scans your Hugo layouts for icon usage and automatically generates or updates your icons.html partial with SVGs from Lucide.

🔥 New Workflow: Hicons now has a dedicated website for Hugo layout-ready code: https://hicons.pages.dev

🚀 Features

• ⚡ Auto-detect icons used across Hugo layouts.
• 🧠 Automatically add minified SVGs to your Hugo partials.
• 🧩 Merge icons into your layouts/partials/icons.html or _partials/icons.html.
• 🛡 Keeps existing icons safe (no overwrites).
• 🎨 Supports $class for Tailwind or custom CSS classes.
• 👀 New: npx hicons --watch & hugo server -D can be added to dev scripts for live updates.
• 🌐 Dedicated icon website: search, click, and copy layout-ready code instantly.

🌐 Dedicated Hicons Icon Layout Website

Forget manually browsing Lucide for SVG icon code. Copying raw SVGs bloats your layouts and may hurt Core Web Vitals. Hicons does it all for you — minified and production-ready.

Steps:

1. Visit https://hicons.pages.dev
2. Search the icon you want (e.g., mail, sparkles)
3. Click the icon or the 📋 Copy button
4. Paste the ready-to-use Hugo layout code directly into your layout template
5. Run npx hicons (or --watch mode) — your Hugo icons partial updates automatically

Example Copied Code:

{{ partial "icons.html" (dict "name" "sparkles" "class" "w-6 h-6 text-pink-500") }}

✅ No manual SVG copy. No bloated if-else blocks. Just clean, Hugo-ready code.

💻 Installation

Global install:

npm install -g hicons

Or run instantly with npx:

npx hicons

⚙️ How It Works

1. Scans all Hugo layout files:

   layouts/**/*.html

2. Finds icon partial calls:

   {{ partial "icons.html" (dict "name" "mail" "class" "w-6 h-6") }}

3. Extracts icon names (e.g., mail, heart, sparkles).

4. Fetches SVGs from the Lucide library.

5. Updates your Hugo partial (icons.html), merging new icons while keeping old ones intact.

🏃 Commands

▶️ One-Time Run

npx hicons

Generates/updates icons.html once.

👀 Watch/Dev Mode

npx hicons --watch

Or with Hugo dev server:

npx hicons --watch & hugo server -D

hicons will:

• Watch all layouts/**/*.html files
• Rebuild the partial whenever icons are added or modified
• Merge new icons safely
• Skip duplicates automatically

Perfect for development with hugo server.

🧩 Example Combined Workflow

Add this to your package.json:

{
  "scripts": {
    "dev": "npx hicons --watch & hugo server -D",
    "build": "npx hicons && hugo --minify"
  }
}

Run:

npm run dev

• Icons auto-refresh instantly while editing layouts
• Hugo live server reloads automatically

🪄 Icon Styling

All icons default to:

• 24×24 size
• stroke="currentColor"

You can fully customize with Tailwind or custom classes:

{{ partial "icons.html" (dict "name" "heart" "class" "w-8 h-8 text-red-500") }}

📁 Partial File Location

hicons supports:

1. layouts/partials/icons.html
2. layouts/_partials/icons.html

If neither exists, hicons will automatically create _partials/icons.html.

🧠 Internals

• Uses Lucide’s official SVG set
• Keeps your existing partial intact
• Merges icons safely
• Prevents duplicates
• Logs new and missing icons clearly

🧪 Optional / Planned Flags

| Flag | Description | | --------------------- | --------------------------------------------------- | | --watch | Watch mode: auto-regenerate icons on layout changes | | --quiet (planned) | Suppress logs except for errors | | --clean (planned) | Remove icons no longer used in layouts | | --stats (planned) | Show how many icons were added or removed |

🪪 License

MIT © OLIMIAH