Sanity plugin to select and preview Lucide icons in the Sanity Studio
npm install sanity-plugin-lucide-icon-pickerDeveloped and maintained by ContentWrap

---
- 1,600+ icons: Access to the complete Lucide Icons library
- Smart search: Quickly find icons with intelligent search functionality
- Responsive design: Works seamlessly on desktop and mobile devices
- High performance: Virtualized rendering and lazy loading for smooth experience
- Configurable: Flexible options for filtering icons
- Preview support: Built-in preview function for Sanity Studio
---
``sh`
pnpm add sanity-plugin-lucide-icon-pickeror
yarn add sanity-plugin-lucide-icon-pickeror
npm install sanity-plugin-lucide-icon-picker
---
1. Add the plugin to your Sanity config:
`ts
// sanity.config.ts
import { defineConfig } from 'sanity';
import { lucideIconPicker } from 'sanity-plugin-lucide-icon-picker';
export default defineConfig({
// ...
plugins: [lucideIconPicker()],
});
`
2. Use the lucide-icon type in your schema:
`ts
// schemas/myDocument.ts
import { defineType } from 'sanity';
export default defineType({
name: 'myDocument',
title: 'My Document',
type: 'document',
fields: [
{
name: 'icon',
title: 'Icon',
type: 'lucide-icon',
},
// ... other fields
],
});
`
---
Limit available icons to a specific whitelist:
`ts`
{
name: 'icon',
title: 'Social Icon',
type: 'lucide-icon',
options: {
allowedIcons: ['facebook', 'twitter', 'instagram', 'linkedin'],
}
}
The allowedIcons option accepts an array of icon names (in kebab-case format) to show only those specific icons in the picker.
---
Icons are stored as kebab-case strings (e.g., "arrow-right", "chevron-down"). Use Lucide's DynamicIcon component to render them:
`jsx
import { DynamicIcon } from 'lucide-react/dynamic';
// Your Sanity data
const iconName = 'arrow-right'; // from your Sanity document
// Usage
export default function MyComponent() {
return (
---
Performance
The plugin is optimized for performance with:
- Virtualized rendering - Only visible icons are rendered
- Lazy loading - Icons load on-demand
- Efficient search - Fast text-based search with debouncing
- Tree shaking - Only imported icons are included in your bundle
For optimal frontend performance:
1. Use dynamic imports to load only needed icons
2. Consider using the
allowedIcons` option to limit available icons---
- Sanity Studio v3 or v4
- React 18 or 19
- TypeScript (recommended)
---
MIT © ContentWrap
---
This package is developed and maintained by ContentWrap, a digital product agency specializing in Sanity and modern web development.