In this article:

Icons visually communicate ideas in a simple and straightforward way, making them the perfect companion to text in email content. Icons can also boost your brand identity, and guide your reader towards the most important content in your email.

So we are delighted to let you know that we have added a section in the Visual library just for icons in Shaman! Official brand icons can be added in bulk by the Shaman team and then can be seamlessly made available to your content teams in branded colors.

If you would like to learn more about how to activate the Icon library in your Shaman account, please reach out to your dedicated Customer Success Manager.

If the Icon library is already active in your account, carry on reading to find out how you can easily add icons to your email content.

Let´s imagine that you have created a new email fragment or template, have completed the email details, and are now in the HTML editor ready to add elements to your email fragment or template. (If you need to revise any of these steps, check out this article here).

From the menus on the right-hand side, select the content menu. Find the image icon in the content menu, and simply drag and drop that icon onto your email canvas.

You will notice that a grey placeholder image has been added to the email canvas. To add an icon to the email canvas instead, click the “Visual library” button from the menu on the left-hand side.

You will then be redirected to the visual library, where you will see the tab “Icons” available to select.

Here you will find a list of icons supplied by your brand lead to Shaman. You can browse through the list of icons, or you can use the search bar or time filters to find the icon you are looking for:

To select an icon to add to your canvas, simply click the selection circle which will reveal the “Add” button in the top right hand corner:

Once you have clicked “Add”, you will see a list of pre-added brand colours available to select. Choose the colour which you would like to assign to the icon.

You will then be redirected back to the email canvas, where the icon will be added to the email canvas in the selected brand color.

Using the menu on the right-hand side, you can then define additional optional settings for the image.

Auto Width: This setting is a toggle that sets an image automatically to fit the width of your email content. To set the width of an image manually, you can disable the auto width toggle and use the slider to resize your image bigger or smaller.

Align: This setting allows you to define the alignment of your image in relation to your email content by selecting from the left, center, right, or full alignment icons.

Alternate Text: Alternative Text is meant to convey the “why” of the image as it relates to the content of a document or webpage. It also displays on the page if the image fails to load.

If you wish to have alternative text for your image, you can add it to this field simply by typing directly into the box available.

Action: Here you can add an action such as if the email recipient clicks on the image, a specific webpage will be opened. There are several options to choose from in the dropdown menu on the right-hand side (which shows “Open Website” as a default action).

Depending on which option you choose, additional fields will be displayed to further personalize the action. For example, if you choose the “Open Website” option, you will need to populate the URL link in the field provided. You can also define whether a new tab is opened, or if the webpage is viewed on the same tab in the reader's browser.

Top tip!

When using the “Open website” option, we always recommend you copy the URL directly from the browser before pasting it in this URL field to avoid any typos or incorrect links.

Container Padding: Padding can be used to perfectly position images within the body of your email content. You can choose to add the same padding to all sides by maintaining the “All sides” toggle enabled. Or, you can disable this toggle to manually configure the padding size for each side of the image. You can use the plus and minus icons to increase or decrease the padding, or you can type a numerical value directly into the padding box.

Hide on Desktop: When this toggle is enabled, the image will not be displayed when viewing the email on a desktop computer or laptop, it will only be viewable on a mobile view.

Good to know!

We highly recommend you pay attention to how your email content looks on both mobile and desktop views. To learn more great tips when creating email content compatible with mobile and desktop views, take a look at this article here.

If you want to change an icon that has already been added to the email canvas, select the icon by clicking on it. Then, from the menu on the left-hand side, click the “Visual library” button.

You will be redirected back to the Visual library where you can select a different icon following the same steps as previously stated.

You will then be redirected back to the email canvas, where the selected icon will be added to the email canvas.

To delete an icon, simply click the icon to select it. You will then notice two icons - a bin icon to delete the image, and a copy icon to duplicate it.

Depending on which you wish to do, simply click the icon, and your image will either be deleted or duplicated.