Iconography: User-interface

Introduction

When used at a small size or when used within software for navigation or functional uses, our user-interface icons should be used. The level of detail in our brand icons would be too much for these use cases and could result in the loss of legibility. Rather, the user-interface icons are created using a simplified pixel grid to ensure icon legibility at the smallest sizes.

Icon shapes are bold and geometric. They have a symmetrical and consistent look, ensuring readability and clarity, even at small sizes.

Shape overview

When creating an icon, view and edit it at 400% (192 x 192 dp), which will display edges at 4dp. By maintaining this ratio, any changes to the original will be scaled up or down proportionally, which preserves sharp edges and correct alignment when the scale is returned to 100% (48dp).

Graphic and bold camera icon
Checkmark Icon
correct

Make icons graphic and bold.

Incorrect icon stroke widths
"X" icon.
incorrect

Don’t use delicate, thin stroke weights.

Thumbs up icon with geometric shapes.
Checkmark Icon
correct

Use geometric, consistent shapes.

Thumbs up icon with incorrect loose, organic shapes.
"X" icon.
incorrect

Don’t use gestural or loose organic shapes.

Icon sizes

When creating an icon, view and edit it at 400% (192 x 192 dp), which will display edges at 4dp. By maintaining this ratio, any changes to the original will be scaled up or down proportionally, which preserves sharp edges and correct alignment when the scale is returned to 100% (48dp).

1:1 unit grid

1:1 Unit grid

Layout padding

4:1 Unit grid

The icon grid establishes clear rules for the consistent, but flexible, positioning of graphic elements.

Topcon grid

Grid

Topcon keyline

Keyline

Layout

Icon content should remain inside of the live area, which is the region of an image that is unlikely to be hidden from view (such as when sidebars appear upon scrolling).

Layout live area

Live area

We connect with our clients in meaningful ways that show we understand their challenges and goals.

Layout padding

Padding

2dp of padding surrounds the live area.

Layout dense live area

Dense live area

Icon content is limited to the 16dp x 16dp live area, with 2dp of padding around the perimeter.

Layout dense padding

Dense padding

2dp of padding surrounds the live area.

Keyline shapes

Keyline shapes are based on the grid. By using these core shapes as a baseline, you can maintain consistent visual proportions throughout your product icons.

Topcon square keyline shape

Square

18dp x 18dp

Topcon circle keyline shape

Circle

20dp diameter

Vertical rectangle keyline shape

Vertical rectangle

20dp x 16dp (H x W)

Horizontal rectangle keyline shape

Horizontal rectangle

16dp x 20dp (H x W)

Clarity (Pixel perfection)

To avoid distorting an icon, position icons “on pixel” by making the X and Y coordinates into integers, without decimals. To avoid distorting an icon, position icons “on pixel” by making the X and Y coordinates into integers, without decimals.

Icon placed "on pixel"
Checkmark Icon
correct

Position icons “on pixel.”

Icon placed "off pixel"
"X" icon.
incorrect

Don’t place the icon on a coordinate that isn’t “on pixel”.

Corners

Corner radiuses are 2dp by default. Interior corners should be square, not rounded. For shapes 2dp wide or less, stroke corners shouldn’t be rounded.

Exterior corners with 2dp corner radii

Exterior corners with 2dp corner radii

Interior corners

Interior corners

Stroke

System icons use a consistent stroke width of 2dp, including curves, angles, and both interior and exterior strokes.

2dp stroke

2dp stroke

Stroke terminal

Stroke terminal

Consistent stroke weights and squared stroke terminals.
Checkmark Icon
correct

Use consistent stroke weights and squared stroke terminals.

Don’t use inconsistent stroke weights or rounded stroke terminals.
"X" icon.
incorrect

Don’t use inconsistent stroke weights or rounded stroke terminals.

Google Materials Icon Library

The full library of our brand icons can be accessed via the Topcon Marketing HUB.Additionally, for creators who have access to the Adobe Creative Cloud Suite, our icons can be accessed via the Topcon Icon Creative Cloud Library. For access to this, please email brand@topcon.com.

If an icon you’re looking for is not included in our library, you can also use any icon available from Google font library for icons. Since our icons are based on Google’s design standard, any icon created by them would work within our brand system. Just follow the guides below to make sure your settings are set correctly to download the correct format of icon.

A screenshot of the Google Materials Icon Library.

Please make sure you follow the settings shown above when downloading an icon from Google’s library:

  1. Filter is set to “Outlined”
  2. Fill is set to “1”
  3. Weight is set to “400”
  4. Optical size is set to “24px”

All icons downloaded should be in “.svg” format. This will allow you to change the icon color in tools like PowerPoint. Make sure to only use the brand approved color palette.

For icons you commonly use from Google, please notify the brand team for consideration to adding to our brand library.