Strapi IconHub

The most lightweight and customizable icon picker for Strapi CMS 🚀

Access 200,000+ professional icons instantly through Iconify's massive library, with zero bloat. Features a built-in color picker and advanced editing tools.

Table of Contents

• Features
• Quick Start
• Configuration
• Usage Examples
• Frontend Implementation
• API Reference

Features

• 🔍 200K+ Icons: Access via Iconify integration
• 🎨 Visual Picker: Intuitive icon selection in Strapi admin
• 🧩 Flexible Storage: Choose between icon name, raw SVG, or both
• 🎨 Color Customization: Built-in color picker and editing tools
• 🧱 Universal: Works with all Strapi content types
• ⚡ Performance: Lightweight and optimized

Quick Start

1. Install

npm i @arshiash80/strapi-plugin-iconhub
# or
yarn add @arshiash80/strapi-plugin-iconhub

2. Rebuild Admin

npm run build && npm run develop
# or
yarn build && yarn develop

3. Verify Installation

Navigate to Settings > Plugins to confirm IconHub is installed.

4. Add to Content Type

1. Open Content-Type Builder and navigate to or create a new collection.

2. Add custom field → Select IconHub

3. Configure storage preferences

⚙️ Configuration

IconHub offers flexible storage options to optimize for your use case:

Note: At least one option must be selected.

Usage Examples

Basic Icon Selection

The icon picker appears in your content entries with search functionality:

Icon Editing & Customization

• Color Picker: Visual color selector with hex input
• Live Preview: See changes in real-time
• Advanced Editing: Modify icon names and SVG data (with safety controls)

Data Structure

1type IconField = {
2  iconName?: string; // Icon identifier (if enabled)
3  iconData?: string; // Raw SVG (if enabled)
4  width?: number; // Icon dimensions
5  height?: number;
6  color?: string; // Custom color (hex format)
7};

💻 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    color?: string;
11  };
12};
13
14export default function IconDisplay({ tags }: { tags: Tag[] }) {
15  return (
16    <div className="flex flex-wrap gap-2">
17      {tags.map((tag, i) => (
18        <div key={i} className="bg-gray-800 px-3 py-2 rounded flex items-center gap-2">
19          {/* Iconify Mode */}
20          {tag.icon.iconName && (
21            <Icon
22              icon={tag.icon.iconName}
23              width={tag.icon.width || 16}
24              height={tag.icon.height || 16}
25              color={tag.icon.color}
26            />
27          )}
28
29          {/* Raw SVG Mode */}
30          {tag.icon.iconData && (
31            <svg
32              width={tag.icon.width || 16}
33              height={tag.icon.height || 16}
34              viewBox={`0 0 ${tag.icon.width || 16} ${tag.icon.height || 16}`}
35              dangerouslySetInnerHTML={{ __html: tag.icon.iconData }}
36              style={{ color: tag.icon.color }}
37            />
38          )}
39
40          <span>{tag.name}</span>
41        </div>
42      ))}
43    </div>
44  );
45}

Styling Options

1// Custom colors
2<Icon icon="mdi:home" color="#ff0000" />
3
4// CSS classes
5<Icon icon="mdi:home" className="text-5xl text-blue-500" />
6
7// Inline styles
8<Icon icon="mdi:home" style={{ filter: 'drop-shadow(0 4px 8px rgba(0,0,0,0.3))' }} />

API Reference

Configuration Options

• storeIconName (boolean): Enable icon name storage
• storeIconData (boolean): Enable raw SVG storage
• required (boolean): Make field mandatory

Field Properties

• iconName: Iconify identifier string
• iconData: Raw SVG markup
• width/height: Icon dimensions
• color: Custom hex color value

Validation Rules

• At least one storage option must be selected
• Color values must be valid hex format
• Icon dimensions are automatically detected

Use Cases

Just be creative!

Compatibility

• Strapi: v4 & v5
• TypeScript: Full support
• Frontend: If you can render svg in your frontend, its compatible. (Next.js, Vue, React, and more)
• Icons: 200K+ Iconify icons + custom SVGs

License

MIT License - see LICENSE for details.