Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: Adding links to icon buttons in your emails - You can add clickable rich text buttons that also include a customizable icon into your email designs that can be linked to any URL.. Machine-readable page: /emailify/content/link-icon-buttons.md.

Adding links to icon buttons in your emails

You can add clickable rich text buttons that also include a customizable icon into your email designs that can be linked to any URL.

Please note that icon buttons are not supported on Outlook; any icons in your buttons will automatically be hidden just for Outlook clients on Windows, but will still render as expected in all other email clients.

To add a new icon button layer to your email design, you can click on any Column or Hero layer, then select the Icon Button option from the Quick Add dropdown menu, then click the Add + button to insert the new button layer into your layout.

Alternatively, you can select one of the preset components under the CTA tab in the plugin, clicking the Icon Buttons sub-category tab, then clicking any of the icon button component preset options to add them as new "Row" layers to your design.

After styling the button to your liking, you can specify the clickable URL by clicking on your Button layer in Figma, then clicking the Settings button, and pasting your URL into the Clickable URL Link input field; this will ensure that your button opens up that URL in the browser when it's clicked.

To have full width split text/icon buttons, you can either add one of the full width presets from the plugin, or you can set one of your existing icon button's Horizontal Auto-Layout setting in Figma to Fill, and then also set the Item Spacing Figma Auto-layout setting to Auto, and this will automatically turn it into a justified/split button.

To customize the icon layer in your icon button, you can drag any single Figma icon frame or vector layer into your Icon Button layer, then delete the original icon layer to ensure there's only one icon inside your Button layer (along with the only other text layer inside the button).

You can apply settings in bulk by opening Settings, then selecting multiple Emailify layers of the same type in Figma. Any setting you change will be applied to all selected layers.