Select the icons, then click on the dropdown menu then select the collection you want to add the icons to and click “Add”
Click on “Collections” to view and customize the icons in a collection.
Customize the icons using our visual design tool then click on “Download” to download the package.
Extract the downloaded file (collection-name.zip) which contains following files/folders:
- sprite.svg: the sprite file consists of all the customized icons in the collection.
- sample.html: icon previews.
- SVG folder: seperated SVG icons in the collection.
- icon-component.js: web component to allow you to customize the icon using CSS.
Copy the above files and folders to your project folder.
For sercurity reason, Chrome and Safari need a referrer to load the sprite so you need to run sample.html and your html files under a server. To start a simple HTTP server on your Mac, simply open Terminal, type
cd, drag and drop your project folder into Terminal, then type the command
python -m SimpleHTTPServer 8000. Go to http://localhost:8000/sample.html to previews the icons.
You also can use apps such as Anvil to create quick local sites.
<head>of your document if you want to use SmartIcons as web component. This approach enables you to customize the icons using CSS. If you want to serve SVG sprite via xlink, you don't need to include the js file.
Copy and paste the input value under your desired icons in sample.html and paste it into your document, wrap it inside a container for styling purpose.