Icon

Mail Studio comes with a rich library of free, ready to use icons. They are fully customizable, work in all email clients and are nice and sharp on high dpi screens.

Basics

Drag and drop an Icon component from the Component panel to the stage. Double click it to open the Icon browser.

In this dialog, you can browse all available icon sets from the dropdown on the top left and search for icons by name.

Select one of the icons in the dialog and click the Save button (or just double click the icon). The Icon component will reflect the change.

Customizing Icons

The icons in Mail Studio are SVG images, with some styling applied so that they are affected by the CSS color and font-size properties. This is done so that icons are easier to customize and adapt to the surrounding text.

To change the size and color of an icon, use the font-size and color options in the Appearance panel. Here is an example of a styled icon:

The same applies when writing CSS in our CSS editor. Just override the font-size and color properties.

.my-icon {
	font-size: 20px;
	color: #1234af;
}

Converting Icons to PNG

As you've probably guessed it, SVG is not supported in many email clients. This is why it's recommended to enable the Convert Icons to PNG option in the Export Settings.

With this option active, Mail Studio will convert the SVG icons into PNG files, preserving the size and color. A 2x resolution is used for the PNG files, so that icons look sharp on high resolution screens.