@sanity/icons

@sanity/icons ships the icon set used across Sanity Studio and the broader Sanity ecosystem as individually importable React components. Every icon is published on its own subpath export (e.g. @sanity/icons/Rocket), so bundlers can tree-shake unused icons without relying on named-export analysis, and each icon lazy-loads via Suspense behind a shared Icon component that renders a same-sized placeholder SVG while the chunk downloads.

The package requires React 19+ as a peer dependency and pairs with the searchable catalog at icons.sanity.dev, where each icon shows a copyable import snippet and search matches by meaning (e.g. searching “settings” surfaces cog, wrench, and controls) rather than requiring exact name knowledge.

What You Get

• 230+ SVG icons, each exported as its own React component on a dedicated subpath (e.g. @sanity/icons/Rocket)
• A shared Icon component that resolves an icon by symbol name and lazy-loads it via Suspense
• A same-shell placeholder SVG rendered while an icon chunk is loading, avoiding layout shift
• A searchable, meaning-based icon catalog at icons.sanity.dev with copyable import snippets
• Full TypeScript typings, including an IconSymbol union type for valid icon names

Common Use Cases

• Building custom Sanity Studio plugins or structure tool customizations that need consistent iconography
• Rendering icons dynamically by name (e.g. from CMS-driven config) via the Icon component’s symbol prop
• Keeping bundle size minimal in Sanity-based admin UIs by importing only the specific icon components used
• Matching the visual language of Sanity Studio in companion internal tools or dashboards

Under The Hood

Architecture — Each icon is a standalone .tsx component under src/exports/, generated from source SVGs in export/ via a build script (scripts/generate.ts); src/icon.tsx implements the dynamic Icon component that looks up a component from the icons map (src/icons.ts) and renders it inside Suspense with a placeholder fallback matching the real icon’s SVG shell (viewBox, data-sanity-icon attribute, 1em sizing). Tech Stack — TypeScript/React 19 (peer dependency), built with tsdown for the distributable bundle and Vite for the local workshop/dev environment; the repo also hosts a Sanity Studio instance (sanity.config.ts, schemas/) and serverless functions (functions/enrich-icon) that power the icons.sanity.dev catalog and its semantic search. Code Quality — Tests cover the barrel exports (src/barrel.test.ts), the dynamic Icon component (src/icon.test.tsx), and the full export surface (src/exports.test.tsx); oxlint/oxfmt configs and knip (unused-export detection) enforce consistency across 230+ generated files. API Design — Two consumption patterns are supported: static subpath imports (import {RocketIcon} from '@sanity/icons/Rocket') for maximum tree-shaking, and the dynamic <Icon symbol="rocket" /> for cases where the icon name is only known at runtime — both share the same visual fallback behavior so there’s no flash-of-missing-icon.