Blog

Learn how to add SVG icons to your shadcn/ui project with a single command. No Iconify needed. Choose your package manager, copy, and install icons like lucide, heroicons, or phosphor directly.

How to use SVG icons in Astro, static inline SVGs, astro-icon, @iconify/svelte in islands, lucide-react in React islands, and zero-JS patterns for maximum performance.

The complete end-to-end workflow for exporting SVG icons from Figma, optimizing with SVGO, converting to React components with SVGR, and automating the pipeline in CI.

Learn how to extend Lucide React with your own custom SVG icons using the official createLucideIcon factory, wrapper components, and design-matching techniques.

Everything about @phosphor-icons/react, all 6 icon weights, the duotone system, SSR setup, IconContext for global defaults, and when to choose Phosphor over Lucide.

How to use @radix-ui/react-icons with shadcn/ui, full icon list, mixing with Lucide, replacing defaults, and building icon-consistent shadcn components.

How to use SVG icons in React Native and Expo, react-native-svg, @expo/vector-icons, lucide-react-native, and building accessible icon components with proper tap targets.

How to use SVG icons in Svelte and SvelteKit, lucide-svelte, @iconify/svelte, unplugin-icons, inline SVGs, and dark mode with Tailwind. Full code patterns included.

How to name SVG icons consistently across Figma, code, and documentation, comparing Lucide, Tabler, and Material naming systems with a practical framework for your own design system.