Skip to content
Qatium Logo Qatium Logo Qatium SDK Documentation
We're currently creating a lot of content. Sign up to get notified when it's ready.

Icons

Interface icons

In the Figma file there is a dedicated section where we provide a pack of generic icons and industry themed icons you can use in your plugin panels.

Map icons

In the Figma file there is a dedicated section to help you create a map icon from scratch. The file is view only, to start editing you must duplicate the original file to your drafts. See Figma documentation

In addition, there is an example SVG file that you use, right-click to download it: map icon example

Principles

Balance between detail and simplicity. Symbols shouldn’t aim to look too detailed to improve readability or too simple to let users tell them apart.

Icons should be flat and monochromatic. Avoiding shadings, perspectives, or 3D effects.

Symbols should look filled, avoiding empty outlines.

Technical requirements

  • The aspect ratio of the icon must be 1:1.
  • Icons mustn’t exceed 48x48px in size.
  • Avoid complex SVG transformations or effects like shadows. Flatten your objects before exporting them.
  • Place the vertices at rounded coordinates, to make the symbols look cleaner. E.g.: A vertex should be placed at coordinates (0, 0). A vertex should not be placed at coordinates (0.01, 0.04).

Composition

Asset icons are usually composed by two parts:

  • Background.
  • Foreground.

Background

The background is a necessary part of the icon to make it stand out from the map beneath, and from other icons when they overlap.

Size and shape

Background shape should:

  • Have a size of 44x44px, composed by:
    • a 40x40px square.
    • a 2px wide outline, with a #000000 color at 30% of opacity.
  • Have rounded corners with 4px radius.
  • Be adjusted to the frame or canvas.

Color

We suggest using the color Grey-100 present in the greyscale palette you can find in the Figma file in the file #d2d2df.

Foreground

Icons might need a symbol to convey an extra layer of information.

Size and shape

Symbols should:

  • have a minimum stroke width of 3px, but 4px is recommended for achieving good contrast.
  • have square external corners or rounded with 2px radius.
  • have square interior corners.
  • fit comfortably inside of the background, always leaving a minimum of 6px of space from foreground to background shapes limits.

In the Figma Icon blueprint file, there is a grid that comes with 4 predefined shapes to fit symbols in, and some examples to follow.

Color

Symbols should be monochrome and opaque, avoiding transparencies. The recommended color is the Grey-500 #222230.

General recommendations

Icons should ensure a good contrast between foreground and background to achieve a good icon readability. There are some online tools such as contrast checker to help with this.