Shapes & weather

Using geometric icons as part of a design system

Geometric shapes can support badges, diagrams, status indicators, and decorative patterns. Their simplicity makes them flexible, but it also means the surrounding context carries much of their meaning. A circle can represent a status, a selection, or a purely decorative accent; define that role before choosing its color and placement.

For status indicators, include a readable label or another clear cue. A colored dot by itself may be ambiguous and should not be the only way users distinguish success, warning, and failure. If the shape is interactive, place it within a semantic control and provide an accessible name. Decoration should not receive keyboard focus merely because it has a hover effect.

When shapes appear behind icons, keep enough padding for the artwork and avoid clipping its stroke. Compare circles, rounded rectangles, and squares using the same foreground symbol. The shape changes the apparent weight of the composition, so a badge that looks balanced in isolation may dominate a small text label. Use consistent corner treatment across related components.

In decorative compositions, repeated shapes can establish rhythm without requiring a complex illustration. Keep these patterns from competing with headings or obscuring controls. Test the background on small screens where elements may overlap differently. Export only the treatment required by the destination: a simple vector may be appropriate for a website, while a flattened image may be easier for a document. Retain an editable source so later color and spacing changes remain straightforward.

To compare badge backgrounds, place the same small check mark inside a circle, a rounded square, and an outlined diamond. Keep the outer sizes equal, then compare the space between the check and each boundary. A mark that looks balanced in a circle can feel cramped in a diamond. Try the badge beside ordinary text as well as by itself. If the surround attracts more attention than the status it represents, simplify its outline or choose a quieter fill.

Prepare a useful export

Choose a sample above to open the editor. Review its size, color, and stroke against the background where it will be used. Keep an editable SVG when your destination supports vectors, or export a PNG at an appropriate resolution. Check the result in the real layout and retain applicable source notices with your project.

Explore the icon guides for examples and troubleshooting, or return to all collections to compare related symbols.