Hi there,

A good call to action is understood at a glance. Buttons in Abyssale can now carry an icon next to their label (an arrow, a cart, a play symbol), making your CTAs more visual and easier to scan.

In the editor

Select a button layer, enable the new Button Icon toggle in the right panel, and upload your icon (JPEG, PNG, SVG or WEBP, up to 20 MB). From there, you control how it sits next to the text:

• Position: left or right of the label
• Gap: the space between icon and text, in pixels
• Size: a percentage of the text's font size, so the icon scales with your text. With Text auto resize enabled, it shrinks along with the label during generation, keeping the button balanced across every visual.

Recolor SVG icons to match your brand

Upload an SVG and you can switch its color between Original (the file's own colors) and Custom (any HEX color of your choice). One icon file can then serve every brand color, button style, or campaign palette, without exporting a new version for each.

Custom color applies a single color to the whole icon, so keep multicolor icons on Original.

Change the icon at generation time

Icons are dynamic, just like the rest of the button. Via the API, send:

• icon_url: a public URL to the icon
• icon_encoded: the icon as base64 or a data URI instead of a URL (if both are sent, icon_url wins)
• icon_color: a HEX color to recolor it (SVG only, no gradients)

json

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

Size, gap and position stay as set in the editor, so your layout holds no matter which icon comes in. If you add an icon by API to a button designed without one, it's placed on the left at font size with no gap, so for the best result, set the icon up in the design first.

Also new: a radius for each corner

Until now, a button's corner radius was a single global value applied to all four corners. You can now set the radius corner by corner, which opens up shapes that weren't possible before: a tab rounded only on top, a speech-bubble style CTA, or a pill cut square on one side to sit flush against another element.