The social media icon element

In this article:


The Social Media Icon element is used to add individual social media channels (icon and associated link) to a signature. This option can be particularly useful if you need to add an icon in line with text - for example:


Having dropped this element into your design, setup options are displayed so you can customize settings for the social media channel.

Note: If you are adding multiple social media channels, it may be quicker to use the Social Media Strip element - this lets you define a range of channels in one place.

Setting up a social media icon

Having dropped this element into your design, setup options are displayed, so you can add settings for the social media channel:


The social media channel is presented with three pieces of information:

Icon A range of professional icons are provided - just use the drop-down list to select one.
Link Enter the URL for the required social media page. If the required URL is the same for everyone in your organization, you can just add a static link (for example: However, if these accounts vary by user and account details are stored in user details fields in your email service directory (e.g. Active Directory for Office 365; Google Directory for G Suite), you can add this field to the URL. To do this, position the cursor at the end of the URL (after the forward slash) and type an open curly bracket. For example:{. This displays a list of available attribute fields, from which you can make a selection:


For further information about working with user attributes and social media icons, please see our Setting up social media icons with attributes article.

Alt Specify 'alternate' text to be shown if, for some reason, the icon cannot be displayed.

Having added details for the required social media channel, you can click OK to confirm, or you can:

Note: You define properties for social media icons once you've confirmed these settings and added the element to your design.

Adding another social media channel

To add another social media channel, click the Add {Field} button:


This adds another row to the list, so you can choose an icon, add Link and Alt details (as before), then click OK to confirm.

Note: When you add more than one social media channel in this way, they are added as a group

Selecting a layout

If you add multiple icons, you can choose whether to display them horizontally:


...or vertically:


Removing a social media channel

If you have added more than one social media channel, you can remove an entry by clicking the cross icon associated with that item:


Note: It doesn't matter if you change your mind later about which channels to include. Once you've added an icon to a signature design, you can still remove individual fields at any time.

Social media icon properties

Once you've confirmed the setup of your social media icon and added this element to your design, properties for the icon are displayed, so you can determine how the field is displayed in the signature. These properties are summarized below:

Note: If you have added more than one social media icon, group properties will also apply. Common group properties are detailed in our Groups and group properties article.

Social media icon 


Social media icon properties determine the appearance of the icon: 

Background Use this option to change the background color of icons. For example:



Background set to black:


Foreground Use this option to change the foreground color of icons. For example:



Foreground set to red:

Width / Height Use this option to change the size of icons. For example:



Width set to 50px:


Corner radius Increase or decrease the curve on icon corners. If the slider is set to the minimum setting, the icon is square:


If the slider is set to the maximum setting, the icon is round:


If the slider is somewhere in between (as per the default), the icon has rounded corners.

Show glass If this option is selected, the icon is displayed with a glassy finish; if it is switched off, the icon has a flat appearance. For example:

Show glass switched on:


Show glass switched off:



Hyperlink properties are used to add link information for the icon:

Destination URL Specify the required link for the social media channel - for example:



Alt text Specify 'alternate' text to be shown if, for some reason, the icon image cannot be displayed.



Visibility properties are used to determine the circumstances under which the icon should/should not be displayed:

Always visible The default setting is to always to display the icon.
Hidden if this field is empty  You can choose to hide this group if a (selected) user attribute is empty.



Alignment properties are used to determine horizontal and vertical alignment of the icon:

Horizontal Determines horizontal alignment of the icon within the signature  - choose LeftCenter or Right
Vertical Determines vertical alignment of the icon within the signature  - choose TopCenter or Bottom



Border properties are used to define borders for the icon:

All  Select a border type, size and color and ensure that the All the same check box is ticked. These settings will be applied for all borders (left, right, top and bottom). This is the default setting (by default, no border is applied because the border size is set to 0).
Left / Right /
Top / Bottom
Ensure that the All the same check box is not ticked and define individual border properties as required.



Padding properties are used to add spacing for the icon:

All The default setting is for this option to be switched off.
Left / Right /
Top / Bottom
Ensure that the All the same check box is not ticked and define individual padding properties as required. The default setting is for there to be 3px padding on the Right. For further information, see Adding spacing between elements in your signature.

Can I use my own social media icons?

A range of social media icons are available when you choose to set up a social media icon. If you wish to use your own icons, you can do so by adding an image - using this method, you can add or link to your own icons.


Haven't found a solution to your problem?

Please click the button below, login to the Exclaimer Cloud portal and raise a support ticket. A member of the Exclaimer Support team will then be in touch.

Raise a support ticket