Iconography

required following the guidelines for iconography is mandatory 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 docid\ ufrg7rrlofpuun mlb67d , which you can use to ensure that your extensions and applications have a consistent look and user experience with the rest of cet icon style 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 https //dev docs configura com/design system/iconography#hoysf 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 https //dev docs configura com/design system/iconography#pxuc0 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 https //dev docs configura com/design system/iconography#hoysf 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 filled icons for those instead filled icons 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 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 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 specifications 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 sizes 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 extension 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 use configura's cet icons 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 in any other way than changeing the color, or using them for other purposes outside of configura's products is not permitted how to find icons 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 colors stroke colors the color called stroke is the default stroke color and are to be used in most cases icon stroke darker to be used 99% of all times \#242424 icon stroke dark \#545454 icon stroke red \#ca391c fill colors 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 icon grey dark \#b2b2b2 icon grey mid \#cccccc icon grey light \#e5e5e5 icon blue dark \#83a6c1 icon blue mid \#9ec2de icon blue light \#c0d8eb icon blue lightest #dfecf5 icon green dark \#91c295 icon green mid \#afdab3 icon green light \#cee9d1 icon yellow dark \#fce26f icon yellow mid \#fceda7 icon yellow light \#fff5cb icon orange dark \#d8ac6a icon orange mid \#f7c780 icon orange light \#fddcaa icon red dark \#d18a7c icon red mid \#e59c8d icon red light \#f4baae