There are 2 ways one can include their own image on a key:

1. Include an icon from our set of libraries
2. Upload a SVG

We’ll look into these options below.

<aside> ⚠️

</aside>

Icon from our set of libraries

We do provide several icon libraries that are mostly MIT licensed (or another form of open license). They are included for your convenience, and if you see a good one missing, make sure to submit a feature request.

By clicking a key

First add an ”icon” layer

Then select an icon kit, and click an icon

Finally you may adjust its size and position using those controls.

By dragging it at the “Customize” step

When reaching the “Customize” step, you may drag and drop icons from the left panel. You will end up in the same screen as above.

Upload a SVG

Some restrictions apply to include your own images:

• All images must be vector-based. And more specifically SVG format.

• They must contain only a single color. No white background.

• No strokes. Strokes won’t work for production, although they might display fine in the UI! If that were the case, we will warn you before starting production.

  <aside> 💡 In Illustrator you may select the object and do Object / Path / Outline stroke to convert all strokes to outlines. In Figma the shortcut is Shift + Ctrl/Cmd + O (source) Other software search for an option to “convert strokes to vector objects”

  </aside>

• No embedded fonts. Any <text> tag found in the SVG will be removed by the app, and won’t appear in the preview. You can of course include text, but need to convert them to outlines/paths first.

  <aside> 💡 In Illustrator you may use Shift + Ctrl/Cmd + O to convert all text to outlines. In Figma the shortcut is Ctrl/Cmd + E (source) Other software search for an option to “convert text to path”

  </aside>

Make sure to abid these restrictions, or the end result may not be what you expect! What you see on your screen might not be what we would get off the machine. If that were the case we would warn you before sending it, but better be safe 🙂