How to convert PNG icons to SVG and use them as React components with CSS theming.

React applications benefit enormously from SVG icons — they're styleable with CSS, animatable, resolution-independent, and can inherit text colors via currentColor. Here's how to convert PNG icons to SVG for React.

Why SVG Icons in React?

PNG icons require separate files for each size and color variant. SVG icons are a single file that scales to any size and can change colors via CSS props. They also eliminate the need for 2× Retina image variants.

Converting PNG Icons to SVG

  1. Batch convert your PNG icons using Shape to Vector (up to 10 at once)
  2. Optimize each SVG with SVGOMG to minimize file size
  3. Import into your React project

Using SVG in React

Two common approaches:

1. Import as React component: With Create React App or Vite, import SVG files directly as components: import {'{ReactComponent as Logo}'} from './logo.svg'

2. Inline JSX: Paste the SVG markup directly into your component. Replace class with className, stroke-width with strokeWidth, and set fill="currentColor" for theme-aware coloring.

Best Practices

  • Use currentColor for fills/strokes so icons match text color
  • Add aria-hidden="true" for decorative icons
  • Set explicit width and height or use viewBox for consistent sizing