Custom icons

While ThingLink provides hundreds of icons, you can upload your own files to further customize the experience.

This article covers the following topics:

• File specifications for custom icons
• Using custom icons in the editor
• Uploading custom icon sets via 'Account settings'
• Finding compatible custom icons online

 File specifications for custom icons

Our new editor works only with SVG files. SVG files are scalable options that will look great on mobile, preventing icon overlap with small SVG icons. Note that SVG can be used to create animated icons. The old editor can still use custom PNG and GIF icons.

Recommended specs for non-SVG files: 32x32 pixels image

Maximum upload size: 140x64  (width x height) pixels, 64 KB file size.

Using custom icons for your tags

Once you have a custom icon, open your ThingLink image or video and follow the steps below

1. Click on a tag or create a new one
2. Click 'Change icon' 
3. Scroll down and click 'Upload icon'. 
4. Select any SVG file from your computer and click 'Upload'.
5. Once the icon is uploaded, you can select it via the 'Change icon' interface.

[Old editor] Uploading custom icon sets

If you are using the old editor, you can upload icon  sets via 'Account settings':

1. Go to the Account Settings in the upper right menu
2. Select the 'Custom tag icons' tab
3. Click 'Upload icon set' button

In the pop-up window you can upload 3 versions of your icon:

1. The default icon, what viewers see when they first mouse over the image (required).
2. The hover icon. When a user hovers over a tag, they will see this version.
3. The Highlight effect. Upload a glow asset to create a glowing effect around your tag.

After selecting all icon version for your custom set, click the 'Upload set' button. This will make your custom icons available in the tag editor.

Finding compatible custom icons online

While drawing your own icons allows a greater degree of customization, it is also possible to find compatible pre-made icons online. Please see this article to learn how to use Iconfinder with ThingLink.

Please note that Adobe Photoshop cannot produce compatible SVG files. You can use Adobe Illustrator instead.

Troubleshooting

Icons are not being rendered correctly in Chrome, Edge or Opera

If your icon includes an image, please make sure that the image is embedded into the SVG file rather than linked. Otherwise, the image won't be displayed in Chromium-based browsers.

For Adobe Illustrator, please see 'Image location' in this guide.

Gradient icons appearing transparent in Firefox

At the moment, Firefox cannot render gradients inside SVG files.