Skip to content

Icons

Icon style

The icon style is important if you want to create a new icon or adapt an existing one. The sizes are given in mm so that the icons can be designed uniformly. If you want to use a finished icon, you can choose any size for it, because it will be exported as a vector based file (svg).

Our icons have to follow these rules:

  • Canvas size: 8.467 mm x 8.467 mm / 24 px x 24 px
  • Max size: 7.5 mm x 7.5 mm / 21.3 px x 21.3 px
  • Stroke size: 1.5 pt
  • Rounding for edges: 0.212 mm
  • Edges: rounded
  • Ends of lines: rounded
  • Color: monochromatic black (except app icons)
  • Surface: Generally not filled, expect the surface gets too small, then it should be filled
Icon example
Fig. 1: Icon example

Icon libs

We are using the open source icon set iconoir. This library follows all of our rules.

Creating an icon

If you don't find a suitable icon in the lib, you have to make a new one or adapt an existing one. You can use the free & open source vector based image editor InkScape.

Create a new icon

  1. Download an existing icon and open it with InkScape
  2. Delete it and draw your own icon with the correct icon styles
  3. save as svg with a dbp- prefix and a meaningful name

Adapt an existing icon

  1. Download an existing icon and open it with InkScape
  2. Make your changes
  3. Save as svg with a dbp- prefix and a meaningful name

App icon

If you create a new app icon[Fig. 2][Fig. 3] you have to follow the above rules.

App icons has additional these rules:

  • Highlight Color: black with 50% opacity
  • Stroke size: 1 px

For further information see App icon.

App icon example
Fig. 2: App icon example
App icon example with dbp background
Fig. 3: App icon example as pwa

Creating an app icon

To create an app take a look at Creating an icon in the section above. And apply a stroke size with 1pt and a part with 50% opacity.

You need to create the following files: (replace appname with the shortname of your application)

  • appname_appicon_dbp.svg: The app icon with the digital blueprint squares as background*
  • appname_appicon.svg: The app icon in #222120
  • appname_appicon_dbp.png: The app icon with the digital blueprint squares as background, 600x600px and 72 ppi
  • appname_appicon.png: The app icon in #222120, 600x600px and 72 ppi

* The icon should be placed in front of the dbp_logo_squares_on_white.svg. The icon should be in the middle of the first square. The maximum size can be taken from fig4.

App icon example with dbp background correct placement
Fig. 4: App icon example as pwa with correct placement