You can add custom icons to your Showit site that you have created or downloaded from the Internet.
To add a custom icon to Showit, it must be uploaded in the SVG format. If you use Adobe Illustrator to create an icon, you can easily generate your SVG there, making sure all strokes are converted to paths.
Note: Icons can only use a single fill color so multi-color SVGs will need to be imported as an image into your media library.
Adding an SVG Icon
To add a custom SVG icon, you will first need to find and download the icon that you would like to use in Showit.
Free SVG Options For Custom Icons
If you would like to download and use a custom icon, there are a lot of options available for download in SVG format from free tools you can find online like:
Sparkk.fr - (very easy copy/paste code directly into Showit)
Note: Not every custom SVG from the internet will work. Some code may be outdated or incompatible.
Using a Custom SVG in Showit
To use a custom SVG in Showit, you will need to copy the SVG's HTML code and paste it directly into your Showit site.
Some sites like sparkk.fr will allow you to directly copy the HTML code.
If you have downloaded a SVG file that you would like to use with Showit, you can get the HTML for this SVG by dragging and dropping it into the SVGOMG editor.
From there you will be able to select the Markup option in the top toolbar to display the HTML. You can then select the copy icon in the bottom right corner to copy the full code.
Once you have the code for your custom SVG copied, head to the Showit Design App and add an icon to the canvas that you would like to have your custom icon on.
With the icon selected, go to the right side Properties Panel and under the Icon Settings tab, select the Custom Icon option.
You will have the option to paste your HTML code into this box to add your custom SVG icon to Showit!
Reduce SVG File Sizes
If you would like to optimize your SVG file by eliminating unnecessary nodes in the code and reducing the file size, you can do so by dragging the SVG into the SVGOMG editor. Once your icon appears in the editor, you will see a list of options in the right side panel.
Turn on all of the settings except Prettify code, and Remove viewBox. This will simplify the HTML code for your SVG. Once you have done this, click the Markup tab at the top. This will show you the reduced code.
Copy this code, go into the Showit Design App and paste the code into the custom SVG box and you are good to go!