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.
Last updated
Our design system's icons are key visuals that guide and simplify user interaction, ensuring intuitive navigation and a consistent experience across our app.
Last updated
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.
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.
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.
Systematic Naming: For ease of use and scalability, icons are named systematically, for example: name=search, size=small, outlined=true.
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.
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.
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.
