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.
Icon type | Purpose | Usage |
Filled icons | These icons are designed for tools and generic products | Appropriate for representing abstract concepts or non-specific items like walls, windows, and generic tools. Should be used when the focus is on function rather than detailed representation. |
Line icons | These icons are intended for use in menus such as application menus or context menus | Ideal for navigation elements, action buttons, and other interface elements within menus. Provides a clean and minimalistic look, enhancing readability and reducing visual clutter. |
Rendered icons For products only | These icons are only used for representing real products. | Exclusively for representing digital twins of specific, real-life products. Suitable when a high level of detail is required to convey the exact appearance of a product. Not to be used for abstract concepts or generic items. Please note If the rendered icons are too similar to one another, it is recommended to create line icons for those instead. |
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. Please use the provided colors whenever possible. If you find a color missing, first try to use a similar color or give us feedback via the feedback button.
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
| |
Stroke thickness | 1 px |
Stroke color | See color table below, 99% of all times should be the color named "Stroke". |
Icon sizes | 16x16, 24 x 24, 32 x 32, 48 x 48 or 64 x 64 |
The sizes listed below are the approved sizes for icons.
Icon size (px) | Where to use |
16 x 16 | Tools, menu items, and generic buttons |
24 x 24 | Extension icons, tools in extension panels and other places where a bigger size is applicable. |
32 x 32 | Use for small product buttons |
48 x 48 | Use for medium product buttons |
64 x 64 | Use for large product buttons |
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:
- Save
- Load
- Help
- Picklist
- etc
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.
It's important to note that the icons are the property of Configura, and their use is restricted to within Configura's product suites. Manipulating the icons or using them for other purposes outside of Configura's products is not permitted.
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.
Stroke - to be used 99% of all times #242424
Stroke-light #545454
Stroke-red #CA391C
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. Please use the provided colors whenever possible. If you find a color missing, first try to use a similar color or give us feedback via the feedback button.
Grey-dark #B2B2B2
Grey-mid #CCCCCC
Grey-light #E5E5E5
Blue-dark #83A6C1
Blue-mid #9EC2DE
Blue-light #C0D8EB
Blue-x-light #DFECF5
Green-dark #91C295
Green-mid #AFDAB3
Green-light #CEE9D1
Yellow-dark #FCE26F
Yellow-mid #FCEDA7
Yellow-light #FFF5CB
Orange-dark #D8AC6A
Orange-mid #F7C780
Orange-light #FDDCAA
Red-dark #D18A7C
Red-mid #E59C8D
Red-light #F4BAAE