Our icons: universal and easy to understand.
Icons illustrate important information in a compact space. Particularly in digital user interfaces, they provide guidance and, along with the logo and typography, represent important ambassadors of our brand: the style of our icons is based on well-known elements and thus ensures clear recognition.
Example applications
A summary of key points:
- The pulse is a key component of our icons.
- Use functional icons first and foremost as navigation elements in the user interface.
- Use illustrative icons to communicate stories and ideas.
Our universal symbol system
Our icons are based on Deutsche Bahn’s design style and are ideally constructed out of lines. We differentiate between functional and illustrative icons.
Functional icons
Functional icons represent commands and interactions. Because they’re universally understandable at first glance, they illustrate user interface options and act as a guide. Their design is inspired by the design style of the pulse.
Illustrative icons
Illustrative icons are more complex in their design than functional icons. They serve to visualise stories and ideas associated with the Deutsche Bahn brand. The pulse is a key component here, too, and stands out due to its two-tone design.
Construction
The footprint for our icons measures 40 × 40 units. The clear space inside ensures that the necessary distance to neighbouring elements is maintained. The inside symbol space of 28 × 28 units is reserved for construction of the icon. Depending on the layout, it may make sense to allow extension of up to two units beyond the grid and thus ensure a harmonious overall impression. The line thickness of the icons is equal to two units.
We try to make the icon design as understated and simple as possible. This also refers to the use of angles: use 90° and 45° angles whenever possible. If necessary, you can use additional angles in 15° increments.
Colour variants
Functional icons should primarily appear in our brand colours.
Combination with type
The icons are designed in such a way that they can be combined harmoniously with our corporate typeface. The icon size including footprint is equal to 1.5 times the font size in use.
Animated icons
Example animation for attracting attention.
Example animation of an icon forming and diminishing.
Example animation for switching from one icon to another.
Example animation for an illustrative icon.
Any questions?
Our corporate design allows you plenty of freedom: we made a conscious decision to refrain from precisely defining each and every special case. Instead, you yourself can decide which solution is the best for the Deutsche Bahn brand. Should you have any questions regarding use, we’ll be happy to assist you.