Iconography

The icons have a very reduced design and can be used inline with text in the same size, stroke and color. Through their informative character they guide the user's interaction to relevant content. They help to perceive facts faster and make the use more enjoyable.

Principles

compass Supportive
The icon set can be used to guide the users attention and make information more easy to consume.
puzzle Personal
The design of the set is based on the TUI Type so it fits perfectly to the brand identity.
partyhorn Joyful
The reduced, round design of the set and the improved usability create a joyful experience.

Technical rules

  • Use a 120x120px canvas
  • Use a 8px centered stroke
  • Use rounded end caps
  • Use TUI Dark Blue (#092A5E) as stroke colour
  • No Fill
  • Use contiguous strokes unless broken segments are helpful for comprehension
  • Use straight segments, perfect arcs, and 15° angle increments where possible
  • Use whole, even number increments for measurements where possible; fold down to 1px and .5px if necessary
  • Use the following shape keylines: 100x100px circles, 90x90px squares
  • Keep a 10px thick trim area
  • The size of the icon corresponds to the font size of the text to be written. It should be placed vertically centered on the text. The distance is equal to 1/3 of the icon-size.

Related articles

chevron TUI Icons Library Our individual TUI Icons library based on the TUIType. Show Brand Identity
chevron UI Symbol Provides a curated selection of symbols from the official TUI Icons Library. Show UI Library