SVG Icons in Chakra UI

Chakra UI's Icon component wraps custom SVG content so it inherits Chakra's spacing, color, and responsive style props.

Preset:

Colors:

Drop your image here

Supports PNG, JPG, BMP, WEBP up to 5MB

VTracer vectorization + SVGO optimizationPrivacy protected

Wrapping Custom SVG in Chakra's Icon Component

Chakra UI's Icon component accepts custom SVG path data as children and exposes Chakra's full style prop system on top of it, letting a custom icon receive boxSize, color, and margin props directly just like any other Chakra component, rather than needing separate CSS to size and position it.

Icon component exposes Chakra's full style prop system on custom SVGs
boxSize, color, and spacing props work directly without extra CSS
Custom icons integrate consistently with the rest of a Chakra layout

Theming Icon Color with Chakra's Design Tokens

Passing a Chakra color token to the color prop, such as color="blue.500", lets a custom SVG icon reference the same design token system used throughout a Chakra project, and combined with fill="currentColor" in the SVG path data, this keeps icon colors consistent with Chakra's light/dark mode color mode switching automatically.

color prop accepts standard Chakra design tokens like blue.500
fill="currentColor" in the path data lets the color prop take effect
Icons recolor automatically with Chakra's light/dark color mode switching

Frequently Asked Questions

Can I use a third-party icon library alongside Chakra's Icon component?

Yes, most third-party React icon libraries export components that work as children within Chakra's Icon wrapper, or can be styled directly with Chakra's style props if they accept a className or style prop.

Does Chakra's Icon component support responsive sizing?

Yes, boxSize and other style props accept Chakra's standard responsive array or object syntax, letting an icon's size change across breakpoints the same way any other Chakra component does.

Ready to Convert Your Image to SVG?

Free online converter — no sign-up, no watermarks, results in under 3 seconds.

Try It Free — Convert Image to SVG