# Icons & Visuals

## **Icon Style**

Consistency is key; use a unified style (e.g., line, filled, flat, or outlined) to ensure visual harmony. Keep icons minimalistic with clean lines for easy recognition and scalability. Icons should be vector-based (SVG format) to maintain clarity at various sizes. Match the icon style to the brand’s tone (e.g., modern for tech brands, classic for traditional sectors). Entities have the option to use their own custom icons or to choose Material Icons, which we recommend as a standard option.

## **Icon Sizes**

Define standard sizes for specific use cases. **Small:** 16x16px, ideal for dense UI elements like toolbars or status indicators. **Medium:** 24x24px, suitable for navigation icons or primary action buttons. **Large:** 32x32px, best for prominent areas, such as section headers or feature icons. Use increments that maintain balance and proportion, ensuring readability and clarity at each size.

## **Color and Tone**

Use primary or secondary brand colors consistently in icons, reserving additional colors for emphasis or interactive states (e.g., hover, active). Ensure contrast for visibility, especially for overlays on different backgrounds, and meet WCAG color contrast guidelines. Assign distinct colors for icons representing specific categories (e.g., health, transportation) to aid quick recognition.

## **Spacing and Placement**

Maintain equal padding around each icon to ensure visual balance. Icons should align consistently within the grid or layout, respecting margins and other visual elements. Group related icons to indicate relationships, with consistent spacing to improve readability.

## **Icon Usage**

Use icons that intuitively convey their function or category (e.g., a heart for health, a bus for transportation). Use icons selectively to avoid visual clutter, reserving them for interactive elements, navigation, or key content indicators. Accompany icons with labels where necessary, especially when the icon alone may not be universally understood.

## **Visuals for Illustrations and Enhancements**

Use purpose-driven illustrations that directly enhance content, like simple illustrations for explanatory text, or visuals that align with the subject matter (e.g., scenic illustrations for tourism). Consider overlay icons to provide additional context (e.g., a pin overlay on a map icon for location-based services). Visuals should reflect the brand’s tone, whether dynamic, professional, or friendly.

## **Accessibility Considerations**

To ensure accessibility, icons should include alt text if they convey essential information, while purely decorative icons should be marked to be ignored by screen readers. Icons must meet a minimum contrast ratio of 3:1 and should not rely on color alone for meaning, supporting users with low vision or color blindness. Consistent icon usage reduces cognitive load, making it easier for users to recognize functions at a glance. For complex icons, adding text labels or accessible names helps clarify their purpose, especially for screen reader users.

Icons should be responsive, scaling smoothly for readability up to 200% and adapting across devices. These best practices ensure icons are clear, usable, and accessible for everyone.

### **References** 

1. [WCAG 1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG21/quickref/#non-text-content)
2. [WCAG 1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG21/quickref/#non-text-contrast)
3. [WCAG 1.4.1 Use of Color](https://www.w3.org/WAI/WCAG21/quickref/#use-of-color)
4. [WCAG 1.4.4 Resize Text](https://www.w3.org/WAI/WCAG21/quickref/#resize-text)
5. [WCAG 1.4.10 Reflow](https://www.w3.org/WAI/WCAG21/quickref/#reflow)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://designsystem.dubai.ae/foundations/icons-and-visuals.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.