Visual Identity
Iconography
We use Font Awesome Pro as our primary visual shorthand to guide the user's eye and simplify complex information.
Font Awesome Pro
Our icon library of choice. We use the Pro tier for access to the full icon set including Regular, Light, and Duotone styles. All icons are sourced from Font Awesome Pro — do not mix in icons from other libraries.
Usage Guidelines
Visual anchors
Use icons to anchor feature lists and bullet points — pair each icon with no more than one short label.
Navigation elements
Icons in navigation should always be paired with a label. Never use icons alone in primary navigation.
Supporting graphics
Use larger icons (32px+) as supporting visuals for key sections or empty states — keep them monochrome.
Consistent weight
Use only the 'Regular' or 'Light' style within a single layout. Never mix weights on the same page.
Color
Icons inherit the text color of their context. Use Productive Blue for interactive icons, Contio Blue for informational ones.
Sizing
Standard sizes: 16px (inline), 20px (navigation), 24px (feature lists), 32px+ (section graphics).
Sample Icons
These 20 icons represent the core visual vocabulary used across Contio — spanning intelligence, collaboration, time, security, and action. Each is drawn from Font Awesome Pro Regular and should be used consistently in product UI, marketing, and documentation.