Adding and Customizing Icons

How to add and customize icons with accompanying text in the Zephyr editor.

Written By Danny Schaffer

Icons in Zephyr will allow you to add icons with associated text.

An arrow pointing to an icon in a marketing email design.

To use Icons in the email editor:

  1. Click on Content tab at the top right, and expand the Additional Elements content category.

  2. Drag and drop an Icons content block into your marketing piece.

  3. Click on the icons block that you have added, and you'll see the Icons Properties tab open on the right.

  4. Click Add new icon for as many icons as you wish

  5. Select Icon images by clicking Change Image or an icon. You can upload your own icons or choose pre-built Icons in the Icons folder in the File Manager’s home navigation.

  6. Insert the icon(s) you would like to use.

Note: Once your icon is in place, you can optionally add some accompanying text to that icon.

  1. Click More options at the top right next to each of those icons, and then add your text to the Icon text area.

  2. After adding the text, you can choose where that text will lie in relation to the icon -- top, bottom, left, or right.

  3. Add a Link in the URL field.

  4. Add text to the Target - Title area to set what text you’d like to display when someone hovers over the icon.

  5. If you have added text, you can customize the text font, size, and styling below.

An image of the "configure icon" area where text, alt text, a link, and hover options can be selected.

  1. Adjust the Size, Spacing, and Padding of the icons in relation to each other.

  2. Head to the Block Options area at the bottom to customize the padding in relation to the edge of the content area.