https://framer.com/m/SVGPro-EiJA.js
SVGPro
SVGPro renders raw SVG markup and takes over its colour, stroke and joins, so bespoke artwork obeys the theme instead of carrying baked-in hex values.
Examples
Live specimens for every control the component exposes.
Default
Paste markup into sVGCode. The component strips baked-in colours so the theme can drive them.
Colour
color overrides every stroke and fill in the markup with a theme token.
Core/primary
Text/text-color
Text/text-secondary
Semantic/warning
Stroke
stroke sets the path width, so one piece of artwork can sit on a dense toolbar or a hero.
1px
2px
3px
4px
Line cap
lineCap decides how an open path ends.
butt
round
square
Line join
lineJoin decides how two segments meet at a corner.
round
miter
bevel
Padding
padding insets the artwork inside its own box, useful for optical alignment beside text.
0px
4px
8px
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for SVGPro
Bespoke artwork must follow the theme colour instead of baked-in hex.
A logo or diagram needs its stroke tuned per surface.
The glyph is not in Phosphor or Lucide.
The graphic needs an accessible title and description.
Reach for something else
A standard icon will do — use IconsPro or IconProLucide.
The asset is a raster image.
The markup carries multi-colour artwork that must keep its own palette.
Io — UI Basics
Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.