Foundation

Iconography

The O2 icon library, exported live from Figma (Atoms → Icons). Icons are grouped by role — UI, navigation and actions, buttons, forms, social, and brand dental illustrations — with the sizing scale that governs them. All artwork below is the actual production vector, not a lookalike.

Icon Sizes

Two size ramps are defined. Floating icons sit directly on the surface; Field (surface) icons include a container and run larger. Heights snap to the values below — width follows the icon's natural aspect ratio.

UI Icons

General-purpose interface icons used across search, contact, location, and page utilities.

Navigation & Actions

Directional and menu icons. Arrows come in Full and Half states in all four directions; carets come in Default (11px) and Medium (16px); the menu icon has open/close states with an optional circle container. The video play icon ships in five sizes (Small 53px through XX-Large 207px).

Button Icons

Icons that pair with CTA buttons. Left icons lead the label at 20×20; right icons trail it. The contained Plus and Circle Arrow carry their own background fill from the token set.

Form Icons

Validation and input states — error, clear, and success.

Brand Dental Icons

Illustrative brand icons in the teal palette. Each ships in two styles — Floating (shown) and Surface (in a circle container) — across all four sizes. Large-format Brand Background Icons (Advanced Dentistry, Mouth, Umbrella, Saliva at 578×400) also live in the library for hero and section art.

Social Icons

Platform icons in three color treatments: Full Color, Grey Scale, and Inverse, all at 24px height.

Decorative