Iconography

Trepup’s icons simplify complex ideas into visual content. Our icons illustrate product features and concepts to help users process information efficiently. We use a consistent style to create new icons.

Principles

Trepup's icon family is unique and colorful. The icons are a clean visual representation of the content.

1. Clear communication

    Easy-to-understand images

Our icons are clear in communication and display the literal meaning of content. They are engaging and understandable.

2. Consistent look

    Common design elements

Our icons use rounded corners based on the Trepup logo. This design adds to our brand’s visual language.

3. Scalable visuals

    Proportionate images for all resolutions

Our icons are used on a wide range of devices. They are scalable for a consistent visual identity.

Types

Product icons

  • Multicolored
  • Varying rounded corners
  • Built on keyline grid
  • Highlight actions

User interface icons

  • Single-colored
  • Uniform rounded corners
  • Built on base grid (1:1 ratio)
  • Support navigation

Specifications - Product icons

Keyline grid

  • Shape guide
  • Position guide

Design pointers

  • a - Balanced color usage
  • b - Equally weighted elements
  • c - No sharp edges
  • d - Rounded border radius

Colors

Multicolored palette

A variety of colors makes our icons look refreshing and unique.

Specifications - User interface icons

Base grid

  • Safe space
  • Total size

Design pointers

  • a - 1 pixel stroke width
  • b - Rounded edges
  • c - 2 pixels and 4 pixels border radius
  • d - Equidistant elements

Colors

Default

Optional

An occasional use of color makes our icons stand out.

Join us and get started. Log in Sign up Free