Blog

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.

Three strategies for making SVG icons work correctly in dark mode with Tailwind CSS and plain CSS — currentColor, filter invert, and CSS variables — with code and failure cases.