Strapi Icon Picker

A custom field plugin for Strapi v5 that allows content editors to easily select icons from Lucide Icons and Duo Icons libraries.

Features

- 🎨 Two Icon Libraries: Access to 3,800+ Lucide icons and 90+ Duo icons
- 🔍 Search Functionality: Quickly find icons by name
- 🌐 Internationalization: Full support for English and Arabic (RTL)
- ⚡ Performance Optimized: Lazy loading for large icon sets
- 🎯 User-Friendly: Modern, intuitive interface with visual icon preview
- 📱 Responsive: Works seamlessly in the Strapi admin panel

Screenshots

!Screenshot 1
!Screenshot 2
!Screenshot 3
!Screenshot 4

Installation

$3

``bash
npm install strapi-icon-picker-x
`

$3

`bash
yarn add strapi-icon-picker-x
`

$3

`bash
pnpm add strapi-icon-picker-x
`

> Note: Replace strapi-icon-picker-x with your actual npm package name when published.

Configuration

After installation, register the plugin in your Strapi configuration file:

File: config/plugins.ts

`typescript
export default () => ({
'icon-picker': {
enabled: true,
},
});
`

> Note: Replace strapi-icon-picker-x with your actual npm package name when published.

Or if you're using a local development version:

`typescript
export default () => ({
'icon-picker': {
enabled: true,
resolve: './src/plugins/icon-picker',
},
});
`

Usage

$3

Add the icon-picker custom field to any content type or component schema:

Example: src/components/sections/card.json

`json
{
"collectionName": "components_sections_cards",
"info": {
"name": "card",
"displayName": "Card",
"description": "A card component with icon support"
},
"attributes": {
"title": {
"type": "string",
"required": true
},
"icon": {
"type": "customField",
"customField": "plugin::icon-picker.icon-picker",
"required": false
}
}
}
`

$3

Example: src/api/feature/content-types/feature/schema.json

`json
{
"kind": "collectionType",
"collectionName": "features",
"info": {
"singularName": "feature",
"pluralName": "features",
"displayName": "Feature"
},
"attributes": {
"name": {
"type": "string",
"required": true
},
"icon": {
"type": "customField",
"customField": "plugin::icon-picker.icon-picker",
"required": false
}
}
}
`

Data Format

The icon picker stores icon data in the following format:

`
library:iconName
`

Examples:

- lucide:Home - Lucide Home icon
- duo:add_circle - Duo add_circle icon

Frontend Usage

When consuming the API, you'll receive the icon value as a string in the format library:iconName. You can parse this and render the appropriate icon:

$3

`typescript
import { Home, Heart } from 'lucide-react';
import DuoIcons from 'duo-icons';

function IconRenderer({ iconValue }: { iconValue: string }) {
if (!iconValue) return null;

const [library, iconName] = iconValue.split(':');

if (library === 'lucide') {
// Dynamically import Lucide icons
const IconComponent = require(lucide-react)[iconName];
return IconComponent ? : null;
}

if (library === 'duo') {
// Render Duo icon
const IconSvg = DuoIcons.icons[iconName];
if (IconSvg) {
return