Skip to main content

Iconography

We use the Nucleo icon library for our system icon library. They follow our attributes of focused, familiar, and inclusive in metaphor and design. Our icons act as visual support to help people move through the experience more effectively.

Disclaimer: According to the license of Nucleo, we just provide the system icon library such as navigation icons, status icons...If you want to make consistent with those icons in your Tini App, please purchase the Nucleo icon library.

Icon overview​

Tini standard size icon is 24px.

icon size

Normal icon content is limited to the 16 x 16px live area (dense area), with 2px of padding.

normal icon

Circle icon or prominent icon content is limited to the 20 x 20px live area, with no padding.

normal icon

Icon style​

Line​

line icon

Usage​

The line icon set is our main icon set. Line icons are used as:

  • Supporting elements for the content.
  • Navigation action (Back, Search, Info, etc...).
  • Inactive state of Glyph.

Specs​

  • 2px stroke.
  • 2px corner-radius whenever possible.
  • Rounded end caps.

Glyph​

glyph icon

Usage​

  • CTA
  • Active state of Line icon

Specs​

  • Icon shapes are bold and geometric
  • 2px corner-radius whenever possible.

Icon size​

Icons have been designed to work in four sizes: 16px, 20px, 24px, and 32px.

Exceptional sizes: depends on the design, some icons can be bigger than 32px but shouldn't smaller than 16px

Usage guidelines​

Be consistent​

Stroke should be consistent