Using icons in React

How to use SVG icons in React apps, from inline SVG to icon components.

March 16, 2026 icons.io Develop

React works well with SVG icons. You can inline SVGs, use sprite sheets, or convert icons to React components.

Inline SVG

Paste the SVG markup into your JSX. Remember to use className instead of class and camelCase for attributes like viewBox.

Icon components

For repeated use, wrap each icon in a small component that accepts className and size props. Our SVG to React Component tool can generate these from your SVGs.

Sprites

For many icons, a single sprite sheet and <use xlinkHref="..."> keeps the bundle smaller than many inline SVGs.