How to Use SVG Icons in React, Next.js and Vue (Iconify, Sprites, Components)

Every icon in the Free Creative Assets icon search can be used in a React or Vue app in four ways. They differ in bundle size, runtime cost and how easy they are to swap later.

Option 1: Iconify components (runtime)

npm i @iconify/react
import { Icon } from '@iconify/react';
<Icon icon="lucide:arrow-right" width="20" />

Icons load on demand from the Iconify API (or a self-hosted API) and are cached. Zero build config, access to 200,000 icons by name. Trade-off: a network request on first use, so avoid it for above-the-fold icons unless you bundle them.

Option 2: unplugin-icons (build time, recommended)

npm i -D unplugin-icons @iconify/json
// vite.config.ts
import Icons from 'unplugin-icons/vite';
export default { plugins: [Icons({ compiler: 'jsx', jsx: 'react' })] };
// component
import ArrowRight from '~icons/lucide/arrow-right';
<ArrowRight className="w-5 h-5" />

Each icon becomes a tree-shaken component; only the icons you import ship. Works with Vite, webpack, Next.js, Nuxt, Svelte. Same name space as the search on this site, so lucide:arrow-right in the search is ~icons/lucide/arrow-right in code.

Option 3: SVG sprite

<svg class="hidden"><symbol id="i-arrow" viewBox="0 0 24 24">...</symbol></svg>
<svg width="20" height="20"><use href="#i-arrow"/></svg>

Best for server-rendered sites without a bundler: one cached file, no JavaScript. Downsides: harder to tree-shake and multi-color icons need CSS variables.

Option 4: inline SVG components

Paste the SVG from the download into a component (or run SVGR). Maximum control, but every icon is hand-maintained. Fine for fewer than 20 icons.

Accessibility

• Decorative icons: aria-hidden="true" and no title.
• Meaningful icons (an icon-only button): aria-label on the button, not the SVG.
• Use currentColor for fill or stroke so icons follow text color and dark mode.

Sizing and alignment

Set width and height on the SVG (or a utility class), keep the viewBox from the source and align with vertical-align: -0.125em or flex centering next to text. Do not mix icon sets with different stroke widths on the same screen; see best free icon sets.

Animated icons

For hover and state animations, static SVG can be animated with CSS, but Lottie gives you designer-made motion with the same component approach (lottie-react). Examples: animated icon set. Integration recipes: how to add Lottie.