Icons

Our design system's icons are key visuals that guide and simplify user interaction, ensuring intuitive navigation and a consistent experience across our app.

Overview

Icons serve as intuitive guides for users, simplifying the visual experience and communicating essential actions and ideas at a glance. They enhance our digital interface by providing an interactive visual language that's both informative and engaging.

Icons punctuate our digital landscape at Agora, offering a visual shorthand for action and insight. Designed to be instantly recognizable, our icons are a blend of simplicity and informative clarity. We offer a Standard Icon Set for everyday use and a Large Icon Set for those moments that demand a bolder statement.

The color of an icon is its voice. The chosen color is not arbitrary; it signals the importance of the icon’s function, guiding users with visual cues that are both intuitive and aligned with their expectations.

Color Application

In the flow of code, an icon bends to the developer's intent. With simple changes in name or style attributes, an icon can transform, offering a new outline or filling a new role with just a few keystrokes. This malleability ensures that our icons are not just part of our design system but active participants in the creation of a dynamic and responsive user experience.

Text and Icon Coherence

Our icons are crafted to pair seamlessly with the Agora typefaces, Inter and SF, ensuring that whether an icon stands alone or beside text, it is always an integral part of the Agora story.

Icon Naming and Scalability

Systematic Naming: For ease of use and scalability, icons are named systematically, for example: name=search, size=small, outlined=true.

Development Best Practices

• Ease of Modification: Changing an icon's appearance is as simple as updating its name or attributes in the code.

• Adaptive Design: Always incorporate .resizable() and .renderingMode(.template) to maintain adaptability for size and color variations.

Stroke and Radius

Width of the stroke has to be 1px for the small icons but for larger icons the width size should be around 2px to 4px.

Corner radius should be 2px for icons. Radius is to add more character to the icons and make them more approachable. The use of radius can differ from project to project.

Typeface Compatibility

Font Alignment: Icons have been designed to pair seamlessly with Agora's chosen typefaces, Inter and SF, ensuring visual consistency and readability across all devices and platforms.

How to Implement:

Icons