Adding Icons

Add a variety of icons to your Showit site

Jeff Willems avatar
Written by Jeff Willems
Updated over a week ago

Using Icons is a great way to add design elements or create unique navigation or social icon buttons within your site.

Add an Icon

To add an icon, select the canvas you wish to place the icon on. Then click on the Element Icon in the Bottom Toolbar and choose the Icon option in the menu that appears.

Adjusting Your Icon

Once you select the icon option it will add a default smiley face icon to your page that you can size and place where you would like. You can then use the Icon Settings tab & the Icon Chooser tab in the Properties Panel to the right to make changes to your icon.

Icon Settings Tab

In the Icon Settings tab, you can choose instead to add a custom icon to your site, or simply change the color of your icon.

Icon Chooser Tab

In the Icon Chooser tab you can select an icon from the list of free Showit icons.

Sync or Split Your Icon Settings

If you would like to have an icon that is colored differently on your desktop site than it is on your mobile site, you can do so with splitting your desktop and mobile settings. Simply click on your icon in your design, then hover over your icon's color setting under the Icon Settings tab and click on the three dots that appear to the right. In the drop down menu that appears, choose to Split Mobile & Desktop.

Once you have split your mobile and desktop settings, you will be able to click the mobile/desktop icon option to choose to customize your icon's color independently between your mobile and desktop designs.

You can merge these settings again by clicking on the same three dots and choosing to merge using either your Mobile or Desktop settings.

Custom Icons

If the icon list didn't have the icon that you were looking for, you can add custom SVG icons to your Showit site by following the steps in this article here:

Duplicate Icons

Once you have the icon that you want, you may want to make a duplicate in order to have a matching arrow or multiple similar icons. Check out this article here for more information.

Did this answer your question?