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 true false 148,226false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type 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 true false 216,435false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type sizes the sizes listed below are the approved sizes for icons true false 177,242false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type 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