Skip to main content

Add an Icon to a Button Layer

Place an icon next to your button text, control its position, spacing and size, and recolor SVG icons to match your brand.

A good call to action is instantly understood. Adding an icon to your button (an arrow, a cart, a play symbol) makes it more visual and easier to scan. With the Button Icon setting, you can add an image beside your button label and fine-tune how it sits next to the text.

Add an icon to a button

  1. Select your button layer in the design builder

  2. In the right panel, enable the Button Icon toggle

  3. Click Update image and upload your icon

Supported formats: JPEG, PNG, SVG and WEBP
​Maximum file size: 20 MB

Tip: Use an SVG file whenever possible. SVG icons stay sharp at any size and are the only format that can be recolored (see below).

Change the color of an SVG icon

When your icon is an SVG, you can choose how its color is handled with the SVG color setting:

  • Original: the icon keeps the colors defined in the SVG file

  • Custom: the icon is recolored with the color of your choice. Select Custom, then enter a HEX code or pick a color

Important: Custom color applies a single color to the whole icon. If your SVG contains several colors, all of them will be replaced by the new color you define. To keep a multicolor icon as it is, leave the setting on Original.

Why is the Custom option disabled?

Color customization is only available for SVG icons. If you uploaded a JPEG, PNG or WEBP file, the Custom option is locked and the icon is displayed with its own colors. To enable this option, replace your image with an SVG file.

Adjust the icon's position, gap and size

Once your icon is added, you can control how it sits next to your text:

  • Position: place the icon on the left or on the right of the button text

  • Gap: set the space between the icon and the text, in pixels (px)

  • Size: set the size of the icon as a percentage of the text's font size. At 100%, the icon is the same size as the font. At 50%, it's half the font size

Because the icon size is relative to the font size, your icon scales automatically with your text. If you use Text auto resize, the icon will follow when the text gets smaller during generation, keeping your button balanced across all your visuals.

If you use the API

You can replace or add a button icon at generation time through the API:

  • icon_url: a public URL to your icon file

  • icon_encoded: the icon sent as base64 instead of a URL (if both are sent, icon_url is used)

  • icon_color: recolors the icon with a HEX color. SVG only, gradients are not supported

Example:

json

{   "payload": "Download now",   "icon_url": "https://your-cdn.com/icons/arrow.svg",   "icon_color": "#0A363A" }

Note: The icon's position, gap and size are defined in the design builder and can't be changed through the API. If you add an icon through the API to a button designed without one, it is placed on the left of the text, at the same size as the font, with no gap. To change this, set up the icon directly in your design.

For all available button properties, check our developer documentation.

Troubleshooting

  • The icon color doesn't change: make sure your icon is an SVG file and that SVG color is set to Custom

  • My multicolor icon became a single color: switch SVG color back to Original to restore the file's colors

  • The icon is too big or too small: adjust the Size percentage, keeping in mind it's relative to the font size

  • The icon is stuck to the text: increase the Gap value

Related Articles
Did this answer your question?