Custom SVG Icon Integration & Formatting Guide

Last Updated: 17 July 2026

BoltTheme allows you to use your own custom brand icons (such as unique trust badges, payment providers, and service indicators) directly in your storefront. Instead of uploading bulky image files, you can paste clean SVG (Scalable Vector Graphics) markup code directly into the Theme Editor settings.

Using SVGs ensures that your icons look perfectly crisp on all devices (Retina screens, high-DPI displays) and load instantly.

How it Works in BoltTheme

Whenever you select “Custom SVG” or “Custom” from an icon dropdown list in any section setting (e.g. Services Page, Quick View features, FAQ headers, or Trust Bar blocks), the theme exposes a text area field: “Custom SVG Icon” or “Custom SVG”.

The theme renders this raw markup inside a standardized SVG wrapper class, allowing it to scale and change colors automatically according to the section’s color settings.

️Step-by-Step Integration Guide

To ensure your custom SVG icons render correctly and inherit the theme’s colors, follow these steps:

Step 1: Obtain a High-Quality SVG Icon

You can search and download safe, open-source SVG icon code from recommended libraries:

Lucide Icons (lucide.dev)
Heroicons (heroicons.com)
Tabler Icons (tabler.io)

Find the icon you want (e.g., a shipping truck or shopping bag).
Click Copy SVG or Copy SVG Code to copy the markup to your clipboard.

Step 2: Clean and Format the SVG Code (Crucial)

Copied SVGs often contain hardcoded sizes and colors that prevent the theme from resizing or coloring them. You must clean the code before pasting it.

Raw Copied SVG Example:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ff0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-truck">
  <path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/>
  ...
</svg>

What to Clean:

Remove width="..." and height="...": Delete these attributes entirely so the theme CSS can scale the icon properly.
Set Color Inherits:

* Change stroke="#ff0000" (or any hex code) to stroke="currentColor".
* If the SVG uses solid fills, change fill="#..." to fill="currentColor".

Keep viewBox: Ensure viewBox="0 0 24 24" (or the native aspect ratio box) remains intact.

Cleaned SVG Example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/>
  ...
</svg>

Step 3: Paste Code in the Theme Editor

Open the Theme Editor and navigate to your section (e.g., Trust Bar or Services).
Select your block in the sidebar menu.
In the settings dropdown under Icon, choose Custom SVG.
Paste your cleaned SVG markup inside the Custom SVG textarea field.
Click Save in the top-right corner.

️Troubleshooting FAQ

My icon is giant and covers the whole screen: You forgot to delete the width="..." and height="..." properties from the tag. Open the code, delete those attributes, and re-save.
The icon color doesn’t change when I switch color schemes: You have a hardcoded color hex code in the stroke="..." or fill="..." attributes. Replace the hex code (e.g. #000000) with "currentColor".
The icon is cropped or off-center: Ensure your SVG code includes a valid viewBox attribute (typically viewBox="0 0 24 24"). Do not modify or delete the viewBox numbers.