SVGPulseUsing exported SVG icons in React components
For React projects, choose between an image file and an inline component based on how much control the interface needs. A static decorative illustration may work well as an image. An icon that follows button colors, accepts a size prop, or changes with component state is often easier to manage as inline SVG.
Choose the integration method
An image element gives you a clean separation between the asset and the component. Its internal paths are not directly styled by the surrounding page. Inline SVG places those paths in the component tree, so presentation can follow props and CSS. Use a consistent method for a given category of icons rather than mixing approaches without a reason. Keep the original SVG file somewhere useful even when the application consumes a component version.
Convert the markup carefully
SVGPulse offers Copy JSX for a React-oriented starting point. When converting manually, remember that many SVG attribute names use React's property spelling, such as strokeWidth and strokeLinecap. Keep viewBox intact so the drawing scales correctly. Remove editor-specific metadata only when you understand its purpose. Do not paste arbitrary downloaded SVG through dangerouslySetInnerHTML just to avoid converting a few attributes; that introduces a different trust boundary.
Make a small reusable component
A useful icon component accepts a class name or style hook, has predictable default dimensions, and uses currentColor when it should inherit the surrounding text color. Avoid a huge abstraction before the product needs one. A simple component for each commonly used symbol is often enough. Keep decorative usage easy, while allowing an intentional accessible name when the icon conveys information on its own.
Keep button semantics outside the artwork
The SVG is not the interactive control. Put it inside a real button or link, depending on what the action does. Give an icon-only button an accessible name that describes the action, such as Open search, rather than Magnifying glass. When visible text already names the action, hide the decorative SVG from assistive technology to avoid repetition. Preserve keyboard focus styles on the actual control.
Avoid collisions in repeated artwork
Gradients, masks, clipping paths, and title associations can rely on IDs. If identical inline markup is rendered many times, fixed IDs can collide. Use unique IDs per component instance when those definitions are necessary, and update their references together. A plain outline path usually avoids this complexity. Test repeated icons in a list, not only a single example on a development page.
Validate the exported result
Run the component through your project's formatter and build, then inspect it in the actual button or menu. Check inherited color, dark mode, disabled states, and whether props accidentally override critical accessibility attributes. A copied component is a starting asset, not a replacement for component testing. Keep icon sizing rules in one shared location so a future design adjustment does not require editing many unrelated files.
Implementation example
export function NextIcon() {
return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} aria-hidden="true">
<path d="M5 12h14m-6-6 6 6-6 6" />
</svg>;
}
// Usage: <button>Continue <NextIcon /></button>Choose the boundary of a reusable component
Consider a settings page that repeats edit and delete actions for several saved addresses. The artwork component can own the SVG geometry, while the surrounding button owns the label, click handler, disabled state, and focus behavior. This boundary keeps the same icon useful in different contexts without attaching the wrong action name to it. For example, an edit symbol beside visible Edit address text can be decorative, while the same symbol in a compact toolbar needs a meaningful name on its button. Give the icon predictable dimensions through props or a shared CSS class, and avoid embedding page-specific margins inside the geometry component. Spacing belongs to the layout that places the icon beside text. Start with the smallest component that expresses these responsibilities; an elaborate configuration API is unnecessary when only size and color vary.
Review repeated definitions and server output
A simple path-only symbol often copies cleanly into a component. Gradients, masks, and clip paths require additional care because their definitions are referenced by identifiers. Rendering many copies with the same identifier can create confusing results when definitions differ. Use a consistent unique identifier strategy supported by your application, especially when server rendering and client hydration must agree. Do not remove definitions just to shorten the source. Inspect the result with several differently colored instances on one page, because a single isolated preview may conceal a collision. Also check whether your build pipeline transforms imported SVG files into components or ordinary asset URLs; those are different integration contracts. A default import that works in one project may behave differently in another. Follow the actual project's configuration and document the expected import style beside the component.
Test behavior around the artwork
The component is not finished when the SVG renders. Tab through the controls, activate them with the keyboard, and verify that changing state is announced or visibly explained where appropriate. Check that spreading props does not accidentally replace a necessary viewBox or remove an accessible label from the containing control. Render the icon in a narrow button, a long translated label, and a disabled control. If the symbol inherits currentColor, test both normal and hover text colors. If it contains fixed brand colors, verify that a broad CSS rule does not override them. Keep snapshot or rendering tests focused on behavior that matters rather than copying the entire exported path into a brittle assertion. The goal is a predictable component that fits your application, with the SVG treated as one part of a larger, usable control.
Continue reading: Preparing SVG icons for WordPress and Elementor
Try it with an icon
Browse a collection, customize an icon in the studio, and review the result in your actual project.
Browse icon collections →