Product icons

Service Packages

These icons help add value to the service packages, making them tangible as entities. Semi-abstract, they are suggestive rather than illustrative.

Each icon references implicitly the notion of the geographic reach of the package it represents.

"Basic" packages use our main brand colors. Premium packages have an additional turquoise accent.

Download Package icons in CMYK [5.3 MB]
Download Package icons in RGB [5.4 MB]
Download Package icons for web [89 KB]

packages
packages

Standard packages
National | Europe | Global
Local

packages
packages

Premium packages.

Products

Product icons translate sometimes complex products into simple, easy-to-understand and approachable symbols.

Each icon focuses on one key aspect of the product it represents.

Download Product icons in CMYK [8.4 MB]
Download Product icons in RGB [8.7 MB]
Download Product icons for web [170 KB]

packages
packages

Ad Booster | Homepage | Top Ranking
etracker | SEO | DACH

packages
packages

European Network | Active Hosting | Retargeting
Product Batch Upload | Product Data Feed | Sponsored Product


Sizes

When used on screen, always implement icons at the designated sizes to avoid poor rendering.
Do not resize icons randomly. Always respect the bounding box of the icon to make sure they scale proportionally.
Our base sizes are:

  • 64 x 64 px
  • 128 x 128 px
  • 256 x 256 px
packages
packages

Clear space

All product icons have a defined clear space equivalent to 1/4 of the icon size. No other content should be placed inside or overlapping this area.
The clear space extends to the width and baseline of the icon name when applied.

packages
packages
packages

Typography: Font weight

Packages

Font-weight: Semibold + Regular
Font-size: 0,375 x icon-height
Line-height: 0,375 x icon-height
Colour: wlw Blue + Turquoise

Products

Font-weight: Light
Font-size: 0,375 x icon-height
Line-height: 0,375 x icon-height
Colour: wlw Blue

packages
packages
packages

Typography: Primary position

Below centered

Font-weight: Light
Font-size: 0,375 x icon-height
Line-hight: 0,375 x icon-height
Colour: wlw Blue

The product name is placed centered below the icon, and on an extension of the icon grid.
The distance from the icon mid-point to the text baseline equals the height of the icon.
The distance from the bottom of the icon to the text baseline equals half the height of the icon.

packages
packages
packages
packages

Typography: Secondary position

Right side middle
Use only when the primary position is not an option!

Font-weight: Light
Font-size: 0,375 x icon-height
Colour: wlw Blue

The product name is placed next to the icon, with vertically aligned centers.
The distance from the right edge of the icon to the left edge of the text equals 1/4 of the width of the icon.

packages
packages

Typography: Inline

When using icons “inline” make sure to respect the clear space area.
Typically, icons should be vertically aligned with the text.

Ideally, the font-size should be no larger than three-quarters the height of the icon.

inline icons

Color background: Dark background

Icons can be placed on a dark background ( “Wer liefert was” blue or Dark grey).
Dark blue fills in the actual icon as well as the product/package name are reversed and filled white.

Download reversed Package icons [293 KB]
Download reversed Product icons [803 KB]

icon_icons_products_reversed
icon_icons_packages_reversed
icon_icons_products_reversed_name

Color background: Light background

Icons can be placed on a light grey background.
To ensure enough contrast, the background should be no darker than our 60% Light Grey ( #DFDFDD).

icon_icons_products_light_background
icon_icons_packages_light_background