icons

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Icon design principle: Clear

Icons should be simple and effectively convey their intended meaning. Avoid unnecessary complexity that makes the icon difficult to recognize. The goal is to communicate quickly and clearly. Draw simple objects that are easy to identify and do not embellish icons with unnecessary details.

Icon design principle: Consistent

Icons follow a cohesive visual style across the user interface. This includes consistent use of line weights, shapes, dimensions, perspectives, and general style. Reuse parts of other icons in the set to maintain visual harmony across all icons. Use universally recognized icons and do not reinterpret or stylize universally recognized icons.

Icon design principle: Universal

Universally recognized symbols and metaphors ensure icons are easily understood by a broad user base. Leverage universally recognized symbols and metaphors to create new icons. Do not rely on cultural-specific, niche, or outdated metaphors as they may not be suitable for all users.

Icons purpose and role

Icons enhance an experience by providing intuitive and efficient navigation, conveying information concisely, and making the interface more visually appealing.

Icon use in Pro design language

Leveraging established symbols to identify key functionality helps merchants understand the admin at first glance. Clear icons that are widely recognized create a clear and predictable experience. Every visual in the admin plays a role in helping merchants scan information and perform tasks without unnecessary distractions.

Icons purpose in design system

Icons are used to increase visual appeal and improve navigation, comprehension, and engagement in the Polaris design system.

Icon color prop replaced with tone in v12

The Icon component's color prop is replaced with tone. Special mappings apply: color="warning" becomes tone="caution", and color="highlight" becomes tone="info". Other color values map directly to tone values.

Icon backdrop prop removed in v12

The Icon component's backdrop prop is removed because backdrop is not a pattern in the new Polaris design language. If a backdrop is needed, use a Box component instead. Pattern: Replace <Icon source={...} color={...} backdrop /> with <Box background={...} padding="100" width="28px" borderRadius="full"><Icon source={...} color={...} /></Box>.

Icon sizes: major and minor now identical

In v12, major and minor icon sizes are now identical. Custom icons may look much larger than Polaris icons if not updated. All icons maintain the 20x20 viewbox.

Give your agent this brain