• About
  • Blog
  • Tools
  • Case Studies
  • Contact

ContentWrap simplifies your Sanity CMS workflow

© Copyright 2025 ContentWrap. All Rights Reserved.

Work
  • About
  • Blog
  • Tools
  • Case Studies
  • Contact
Tools
  • Sanity Pricing Calculator 2025
  • Markdown to Portable Text Converter
  • HTML to Portable Text Converter
  • Rich Text to Portable Text Converter
Legal
  • Terms of Service
  • Privacy Policy
  • Cookie Policy
  1. Blog
  3. sanity lucide icon picker plugin
Sanity Setup
Custom Features
Studio UX
July 29, 2025

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

Tamba Monrose
Founder of ContentWrap
Sanity Lucide Icon Picker Interface

In this article

  1. Why This Plugin Exists
  2. What Makes Lucide Perfect for This
  3. The Plugin Experience
  4. Technical Innovation
  5. Real-World Impact
  6. Frontend Integration Made Simple
  7. Built for the Modern Web
  8. Get Started Today

Share this article

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:

Related Articles

decorative, sanity table view and bulk actions table
Outgrowing Webflow
Studio UX
August 2025
The Bulk Actions Table Plugin: Bringing Webflow-Style Content Management to Sanity

Sanity's biggest weakness solved: bulk content management. Our new plugin adds table views, bulk operations, and enterprise-ready content management tools to Studio.

decorative, lottie logo
  • 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

Sanity Setup
Custom Features
Studio UX
July 2025
Introducing the Sanity Lottie Plugin: Bringing Animations to Life in Your CMS

We built the missing piece in Sanity's ecosystem: a plugin that lets you upload, preview, and manage Lottie animations directly in Studio. No more workarounds or broken workflows.