Using an SVG icon in HTML, React and React Native, and changing its colour
A developer's guide: inline SVG vs img, currentColor for theming, SVG as a React component and react-native-svg on mobile.
You have an SVG icon, converted or drawn. The questions that follow are always the same: how do I put it on the page, how do I change its colour from CSS, and how do I use the same file in a React Native app. Here is the whole path, with the trade-offs.
Step 0: make the colour controllable
A converted SVG has literal fills, for example fill="#0d1014". To recolour it from CSS, replace the fill of the shapes you want to theme with currentColor. Then the icon takes the CSS color of its parent. Keep literal colours for parts that must stay fixed, like a brand accent.
- Single-colour icon: replace every fill with currentColor.
- Two-tone icon: currentColor for the main shape, a literal or a CSS variable (fill="var(--accent)") for the accent.
- Remove width and height attributes from the root and keep the viewBox; size it with CSS.
Plain HTML: inline or img
An img tag (or a CSS background) is the simplest: cached, no markup in the page, but the colour cannot be changed from CSS, and currentColor does nothing there. Inline SVG, pasted into the HTML, is styleable and animatable and costs a few hundred bytes per use. Rule of thumb: inline for icons that change colour or state; img for logos and illustrations that do not.
Inline example: paste the svg element into the page, set color on a parent, and every currentColor fill follows. For many icons, put them in one hidden svg as symbol elements and reference them with use; the browser paints each use with the colour at that spot.
React: the icon as a component
Turn the SVG into a component so it takes props. Convert attribute names to camelCase (stroke-width becomes strokeWidth, fill-rule becomes fillRule), remove the xmlns, and spread props onto the root so className and aria-label pass through. A tool like SVGR does exactly this from the command line or as a bundler plugin, so you keep the .svg files and import them as components.
Colour is then a matter of CSS color on the component or a parent, or a color prop that sets fill on the root. For a themeable icon library, currentColor plus CSS variables is enough; there is no need for a runtime library.
React Native: react-native-svg
Native views cannot render SVG markup. The react-native-svg package provides Svg, Path, Circle and the other elements as components. Convert the file with SVGR using its native preset, which emits those components instead of DOM elements. Sizing is explicit (width and height props with the viewBox kept), and colour is a fill prop on the Path elements; the usual pattern is a color prop on your component passed down to every fill that should be themed.
- Install react-native-svg (Expo includes it).
- Run SVGR with the native option to get a component file per icon.
- Keep gradients simple; react-native-svg supports linear and radial gradients, but each needs a Defs block, which SVGR generates for you.
Keep the file small
An icon should be a handful of paths. If your converted file has dozens, the source had noise or shading; convert it again in Logo mode with fewer colours. svgize shows the path count next to every result, so you can check before you ship it. Run the final file through an optimiser like SVGO to strip metadata and shorten numbers.