Strapi IconHub

A powerful and lightweight icon management plugin for Strapi CMS that supports both raw SVG and the Iconify icon library.

Features

• 🔍 Access 200K+ icons via Iconify integration
• 🎨 Visual icon picker in Strapi admin UI
• 🧩 Dual storage: icon name and raw SVG code
• 🧱 Compatible with all Strapi content types
• ⚙️ Optimized for dynamic frontend rendering
• 🚀 Lightweight and performant

Installation

# npm
npm i @arshiash80/strapi-plugin-iconhub

# yarn
yarn add @arshiash80/strapi-plugin-iconhub

Rebuild the admin panel:

# npm
npm run build && npm run develop

# yarn
yarn build && yarn develop

Verification

Navigate to Settings > Plugins to confirm IconHub installation.

Usage

1. Open Content-Type Builder
2. Add a new custom field
3. Select Custom tab and choose IconHub
4. Save schema changes

The icon picker will be available in your content entries:

Data Structure

1type IconField = {
2  iconName: string; // e.g. "mdi:home"
3  iconData: string; // Raw SVG string
4  width?: number; // Optional width
5  height?: number; // Optional height
6};

Frontend Implementation

Next.js Example

1import { Icon } from "@iconify/react";
2
3type Tag = {
4  name: string;
5  icon: {
6    iconName: string;
7    iconData: string;
8    width?: number;
9    height?: number;
10  };
11};
12
13export default async function Home() {
14  const res = await fetch("http://localhost:1337/api/tags");
15  const json = await res.json();
16  const tags: Tag[] = json.data;
17
18  return (
19    <div className="w-full h-screen flex flex-col justify-center items-center gap-5">
20      <h1 className="text-5xl font-semibold mb-10">Strapi IconHub Demo</h1>
21
22      {/* Iconify Implementation */}
23      <section className="text-center">
24        <h2 className="text-2xl font-semibold mb-4">Iconify Component</h2>
25        <div className="flex flex-wrap gap-2 justify-center">
26          {tags.map((tag, i) => (
27            <div key={i} className="bg-gray-800 px-3 py-2 rounded flex items-center gap-2">
28              <Icon icon={tag.icon.iconName} />
29              <span>{tag.name}</span>
30            </div>
31          ))}
32        </div>
33      </section>
34
35      {/* Raw SVG Implementation */}
36      <section className="text-center mt-10">
37        <h2 className="text-2xl font-semibold mb-4">Raw SVG</h2>
38        <div className="flex flex-wrap gap-2 justify-center">
39          {tags.map((tag, i) => (
40            <div key={i} className="bg-gray-800 px-3 py-2 rounded flex items-center gap-2">
41              <svg
42                width={tag.icon.width || 16}
43                height={tag.icon.height || 16}
44                viewBox={`0 0 ${tag.icon.width} ${tag.icon.height}`}
45                dangerouslySetInnerHTML={{ __html: tag.icon.iconData }}
46              />
47              <span>{tag.name}</span>
48            </div>
49          ))}
50        </div>
51      </section>
52    </div>
53  );
54}

Styling

Customize icons using CSS classes or inline attributes:

1// Iconify
2<Icon icon={icon.iconName} className="text-green-500 text-5xl" />
3
4// Raw SVG
5<svg
6  width={48}
7  height={48}
8  className="text-green-500"
9  viewBox={`0 0 ${icon.width} ${icon.height}`}
10  dangerouslySetInnerHTML={{ __html: icon.iconData }}
11/>

Note: SVGs from Iconify are safe to render with dangerouslySetInnerHTML. Only use with trusted content sources.

Compatibility

• Strapi v4 & v5
• TypeScript
• Modern frontend frameworks (Next.js, Vue, etc.)