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.
Icon downloads
Access the official Topcon icon library below, selecting from print or digital versions to ensure optimal display for your specific deliverable. For designers and content creators, please reach out to brand@topcon.com for access to the Adobe Creative Cloud and Figma libraries.
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
Icons can be used as a standalone graphic element, within a circle, or rounded square.
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
Generally speaking, our icons may be used in brand-approved colors depending on the use-case. In most cases, our icon color should match the color themes set with our website design and other brand templates. For light backgrounds, blue500 should be used. For dark backgrounds, blue300 should be used.
Don’t use gradients, non-approved colors, or a mix of low contrast colors with icons.
Icon sizing
Use icons as a minimal graphic support element.
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).
1:1 Unit grid
.webp)
4:1 Unit grid
The icon grid establishes clear rules for the consistent, but flexible, positioning of graphic elements.
.webp)
Grid
.webp)
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.
.webp)
Square
152dp x 152dp
.webp)
Circle
176dp diameter
Vertical rectangle
176dp x 128dp (H x W)
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.
.webp)
Position icons “on pixel.”
.webp)
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.
Please make sure you follow the settings shown above when downloading an icon from Google’s library:
- "Material Icons" is selected
- "Rounded" style is selected
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.