Iconography: Brand icons

Introduction

Icons are a visual expression of our technology, products, or concepts. They communicate the core idea of something in a simple and compact format. While every icon should be unique, they must all work together and be created using a unified and consistent method.

Our icon library is based on Google Material design standards. Below are some guidelines that are most important to take into consideration when creating icons. For further guidance, please reference the Google Material design guide.

The Topcon icon library is split into three groups: brand icons, software icons, and user interface icons. Our brand icons can be used to communicate things such as an industry, product category, product feature, benefit, and more. They are created to be a simple and compact visual representation of a thing or idea. They are not meant to be overly illustrative or detailed. When more detail is needed, a photograph or 3D render should be used in place of an icon.

Usage and color

Brand icons can be used for a variety of applications such as on a webpage, in a brochure, on a social media graphic, in a presentation, and much more. The icons are created as vector graphics allowing them to scale up and down without pixelation. Their color can be changed easily using design programs like Microsoft PowerPoint, Adobe creative tools, and a handful of other design programs.

Icons in shapes

Checkmark Icon
correct

Icons can be used as a standalone graphic element, within a circle, or rounded square.

"X" icon.
incorrect

Don’t use an icon within a hexagon, triangle, or any other shape. The only exception being that legacy software branding may still be used within a hexagon until updated branding is provided.

Icon color

Checkmark Icon
correct

Icons can be used in either Blue 400 or Green 400 depending on the icon. Icons can also be used in white or black. In some cases, icons may be used in other brand-approved colors depending on the use-case.

"X" icon.
incorrect

Don’t use gradients, non-approved colors, or a mix of low contrast colors with  icons.

Icon sizing

An example of icons with the correct sizing.
Checkmark Icon
correct

Use  icons as a minimal graphic support element.

An example of icons with the incorrect sizing.
"X" icon.
incorrect

Don’t  use the icons at a large scale in a way you would use an illustration or a  photo. Icons are meant to be used at a small scale.

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).

Topcon 1:1 unit grid

1:1 Unit grid

Topcon 4:1 unit grid

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

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

152dp x 152dp

Topcon circle keyline shape

Circle

176dp diameter

Topcon grid

Vertical rectangle

176dp x 128dp (H x W)

Topcon keyline

Horizontal rectangle

128dp x 176dp (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”.

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 Fonts library for icons.

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 “700”
  4. Optical size is set to “48px”

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.