Iconography



The icons are custom-made by the designers at Configura based on a set of guidelines to follow when designing new icons. We have organized some of these icons applicable for general usage into our Icon Library, which you can use to ensure that your extensions and applications have a consistent look and user experience with the rest of CET.

Our design system includes three distinct icon styles, each serving a specific purpose. Proper use of these styles is crucial to stay within the design system guidelines.

These icons has a color fill; however, these colors are purely decorative and should not convey any information.

To maintain a unified look and feel across the icons, we have developed a color palette that is approved for use. Each color in the palette has three sets of hues: a light, a mid, and a dark hue. It is highly recommended to use the color palette provided by us. As a last resort, using you own colors for these icons is acceptable, as long as they works well with the color palette provided by us.

Line icons should be used in menus, such as application menus and context menus. This icon style features a simple stroke to avoid distracting users with colors in these scenarios.

Since filled icons naturally attract more attention compared to unfilled icons, icons that are considered secondary or less important should remain unfilled. For example, icons located on the right side of headers in extension panels should typically remain unfilled to maintain a balanced visual hierarchy.

While the default stroke color is designed to be low-key, alternative stroke colors may be used sparingly to emphasize specific elements within an icon when necessary. See the Unfreeze icon and Explode block icon

Rendered icons are used to represent real-life products. This is the only scenario where rendered icons should be applied. Please note If the rendered icons are too similar to one another, it is recommended to create filled icons for those instead.





The sizes listed below are the approved sizes for icons.



The icons found on the extension tab bar should be 24x24 or 44x24. It's important to note that the same icon is used for both the tab and the header (at the top of the extension), so consistency in size is crucial. Additionally, we aim to save space around the icon to accommodate different states, such as sleep, collapsed, and potential future states.



Please utilize the icons provided by us for common functionality icons. This promotes familiarity among our users and facilitates the recognition of common patterns across different extensions.

Examples of icons that should remain consistent across all extensions include:

Please ensure that you use the icons for their intended purpose. If you have any questions or encounter confusion, don't hesitate to contact us for clarification.

All the icons are available in the CET code repository for those with a developer license. If you are not a developer and wish to use our icons for design work or mock-ups, you can download the icons from this page: Icon Library

The color called Stroke is the default stroke color and are to be used in most cases.

We have developed a color palette to use for the icons. Each color in the palette has three sets of hues: a light, a mid, and a dark hue. It is highly recommended to use the provided color palette. As a last resort, using you own colors for these icons is acceptable, is they work well with the color palette provided by us.