Inline SVG Block

The Inline SVG block displays an SVG image from the Media Library. It’s typically used as a supporting visual element — adding icons, symbols, or simple graphics alongside headings, text, or other content. Because SVG files are scalable, they remain sharp at any size and work well for clean, lightweight visual accents.

Why use the inline svg block

Use the Inline SVG block when you want to:

  • Add an icon next to a heading or short piece of text
  • Include a simple graphic that scales cleanly
  • Enhance visual hierarchy without adding heavy imagery
  • Keep file sizes lightweight while maintaining sharp resolution

This block works best as a complementary element within a layout — not as standalone content.

How to use the block

Start by adding the Inline SVG block to the page. Learn how to add blocks.

Once the block is added, editors typically:

  • Open the Media Library
  • Upload a new SVG file or select an existing one
  • Adjust alignment and size to fit the layout
  • Add spacing using padding or margin if needed

Only SVG files will be available for selection in the Media Library.

While the block does not automatically display inline with other blocks, it is commonly placed inside Columns or similar layout blocks to appear alongside Headings or text.

Block toolbar

When the Inline SVG block is selected, the block toolbar includes:

  • Alignment: Control how the SVG aligns within the layout
  • Replace: Select a different SVG file from the Media Library

Use alignment settings to position the SVG appropriately within its container.

Block settings

Block settings appear in the right sidebar while the Inline SVG block is selected.

  • Resolution: Choose the image size from available resolution options.
  • Width / Height: Enter specific dimensions to control the display size of the SVG. Because SVGs are scalable, you can safely adjust dimensions without losing image quality. However, keep proportions consistent to avoid distortion.

Block styles

In the block settings sidebar under the Styles tab:

  • Padding and margin: Adjust spacing around the SVG to improve layout flow. Use padding and margin intentionally to align the icon visually with nearby content instead of adding empty blocks for spacing.

Tips for editors

Use SVGs for simple graphics

SVGs work best for icons, logos, and simple vector illustrations. Avoid uploading complex raster-style artwork as SVGs unless designed for that format.

Keep proportions consistent

When adjusting width and height, maintain the correct proportions so the image does not appear stretched.

Use within layout blocks

To place an icon next to text or a heading, insert both blocks inside a Column or Row layout.

Keep visual treatments consistent

If using multiple SVG icons within a section, keep their sizes and alignment consistent for a polished look.