SlowlySVG
Drop in your own SVG and style it directly.
The SVG block places vector artwork directly in the page, your own file or a library icon rather than a flat image. Because the SVG renders inline, you can colour, resize, and animate it through the design controls rather than editing the file.
Uploaded SVGs are sanitised on the way in, with off-site references stripped, so a pasted file cannot reach out somewhere it should not.
Adding one
- Select the section or container to hold it.
- Open the inserter and search "svg".
- Pick the SVG block.
Settings
In the SVG's own panel. Appearance lives in the shared design panel.
| Setting | What it does | Reach for it when |
|---|---|---|
| Source (icon) | Picks a glyph from the connected icon library (FontAwesome by default) | You want a standard UI icon without uploading a file |
| Source (inline SVG) | Accepts raw SVG markup pasted directly | You have a custom illustration or logo and want full CSS control over its paths |
| Source (image) | Treats the SVG as a media-library image rather than inline code | You need a static file reference rather than stylable markup |
| Icon library | Switches between available icon sets | You are using a different icon pack from the default |
| Icon size | Sets the rendered dimensions | Sizing an icon to match surrounding text or a specific layout slot |
| Fill colour | Fills the SVG paths | Colouring a monochrome icon to match the palette |
| Stroke | Sets path outline colour and weight | Line-style icons where fill alone is not enough |
| Stroke width | Controls the thickness of the path outline | Adjusting line weight without editing the source file |
| Link | Wraps the SVG in an anchor, a URL, a page, or a dynamic destination | Making an icon or logo clickable |
| Alt text | Describes the image for assistive technology | Any SVG carrying meaning that sighted visitors read from its shape |
Styling
The SVG block uses the shared design panel for spacing, size, colour, borders, and effects, each per breakpoint. For hover colour changes or pointer animations, the states panel is where those live.
Accessibility
If the SVG carries meaning, add alt text in the block settings. A logo, a map pin, a status indicator, these all communicate something that a screen-reader visitor cannot infer from shape alone. A purely decorative SVG used only for visual rhythm does not need alt text, but most SVGs that appear on a page do carry meaning. When in doubt, describe it.