The Sanity Lucide Icon Picker: 1,600+ Icons at Your Fingertips

Icons are everywhere in modern web design. They guide users, communicate meaning instantly, and add visual polish to interfaces. But managing icons in a CMS has always been frustrating, until now.

We're excited to introduce the Sanity Lucide Icon Picker, a plugin that brings the entire Lucide Icons library directly into Sanity Studio with an intuitive, searchable interface.

Why This Plugin Exists

Working with icons in Sanity typically meant one of several painful workarounds:

• Uploading SVG files as assets (cluttering your media library)
• Hardcoding icon names as strings (no visual preview, prone to typos)
• Building custom icon components (time-consuming, maintenance overhead)
• Using external icon libraries without CMS integration

None of these solutions felt right. Content creators couldn't see what they were selecting, developers had to manage inconsistent implementations, and everyone wasted time on what should be a simple task.

What Makes Lucide Perfect for This

We chose Lucide Icons for good reason. With over 1,600 beautifully crafted icons, Lucide has become the go-to icon library for modern web development. The icons are:

• Consistent in style - Clean, minimal design that works everywhere
• Actively maintained - Regular updates and new additions
• Developer-friendly - Available as React components, SVGs, and more
• Lightweight - Optimized for performance with tree-shaking support

The Plugin Experience

Smart Search That Actually Works

Finding the right icon among 1,600+ options could be overwhelming. Our search functionality is intelligent; type "arrow" and you'll see all arrow variants, type "social" and find platform icons, or search by concept like "navigation" or "user."

Visual Selection, Not Guesswork

Every icon is displayed in a clean grid with instant visual feedback. No more guessing what "chevron-double-right" looks like. With ContentWrap's Lucide Icon Picker you can see it, click it, and it's selected.

Performance That Scales

We built this plugin to handle 1,600+ icons without lag. Virtualized rendering means only visible icons are loaded, search is debounced, and the interface stays responsive even on slower devices.

Smart Configuration

Need to limit icon choices for brand consistency? Use the allowedIcons option to create curated sets—perfect for teams that want to maintain design standards.

Technical Innovation

The real challenge was creating a smooth experience with such a large icon set. We solved this through:

• Virtualized rendering - Only icons in view are actually rendered
• Efficient search algorithms - Fast filtering across thousands of icons
• Optimized bundle size - Icons are loaded on-demand, not all at once
• Mobile-responsive design - Works seamlessly on tablets and phones

Real-World Impact

This plugin transforms icon workflows:

• Content creators can visually browse and select icons without technical knowledge
• Designers get consistent icon implementation across all content
• Developers receive clean, standardized icon data from the CMS
• Teams can enforce brand guidelines through curated icon sets

Frontend Integration Made Simple

Icons are stored as simple strings ("arrow-right", "user-circle") that work perfectly with Lucide's DynamicIcon component:

import { DynamicIcon } from 'lucide-react/dynamic';// From your Sanity dataconst iconName = 'arrow-right';// Render it<DynamicIcon name={iconName} size={24} />

Clean, type-safe, and performant.

Built for the Modern Web

This plugin represents our philosophy: complex problems should have simple solutions. Managing icons shouldn't require technical expertise or compromise on user experience.

We've already seen teams adopt this for navigation menus, feature sections, service listings, and more. The combination of visual selection and developer-friendly output makes it valuable for everyone involved in the content creation process.

Get Started Today

The Sanity Lucide Icon Picker is available now:

npm install sanity-plugin-lucide-icon-picker

Check out the complete documentation on GitHub and see how it can streamline your icon workflows.d