Sharjah Design System نظام الشارقة للتصميم
Sharjah Design System نظام الشارقة للتصميم
عربي Government of Sharjah
Home
Typography Color system Iconography Layout and spacing Input & fields Buttons Responsive Accessibility Design tokens Content design
Get started UI Components Templates UI Kit
Roadmap

Links

Home Getting Started UI Kit

Guidelines

Typography Color system Iconography
Buttons Responsive Design Tokens

Results

Search the site for “”

Iconography

Iconography enhances usability by providing clear visual cues that support navigation, actions, and content. The Sharjah Design System uses a consistent icon set to improve recognition, accessibility, and visual harmony across digital services.

Iconography

Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information. Our icon library ensures consistency across all government digital services.

Iconography principles

Consistent

Recognizable

Simple

Accessible

Icon library

We use Font Awesome 6 Pro for our icon system. Below is a selection of commonly used icons. Visit the Font Awesome 6 Pro for the complete library.

Font Awesome 6 Pro

Light

home bell book link building user users
landmark-dome dove watch check circle-check list box
flag grid-2 clock image print file files

Regular

home bell book link building user users
landmark-dome dove watch check circle-check list box
flag grid-2 clock image print file files

Solid

home bell book link building user users
landmark-dome dove watch check circle-check list box
flag grid-2 clock image print file files

Some insight

Icons should be used purposefully to enhance usability and comprehension. They work best when paired with labels, especially for critical actions. Avoid using too many different icon styles in one interface—consistency builds trust and improves recognition. Always ensure icons meet accessibility standards by providing proper labels, using sufficient contrast, and maintaining a minimum touch target size of 44×44 pixels for interactive icons.

Stroke

Icon stroke weight affects visual hierarchy and readability. Use consistent stroke weights throughout your interface.

Thin

1px

Light

1.5px

Regular

2px

Medium

2.5px

Bold

3px

Corner

Icon corners should be consistent with your design system's overall border radius.

Sharp (0px)

Small (4px)

Medium (8px)

Large (12px)

Full (50%)

Alignment

Proper icon alignment ensures visual balance. Icons should align with adjacent text and elements.

Icon aligned with text baseline

Icons maintain consistent spacing

Vertical centering for better readability

When to use icons

Icons are most effective when they enhance understanding rather than complicate it.

Use icons to:

  • • Improve scannability of navigation and actions
  • • Draw attention to important features or status
  • • Save space in compact layouts
  • • Reinforce meaning when paired with labels

Avoid icons when:

  • • The meaning is unclear or ambiguous
  • • They're purely decorative with no functional purpose
  • • Text alone would be clearer and faster to understand
  • • Used without proper accessibility labels

Style icons

Icons can be styled with different colors, backgrounds, and treatments to match your design context.

Default (Neutral)

Primary (Brown)

With Background

Icon shapes

Icons can be placed within different container shapes to create visual emphasis or category distinction.

Circle

Square

Rounded

Do's and don'ts with icons

Do

Settings
  • • Use consistent icon sizes
  • • Pair icons with clear labels
  • • Maintain adequate spacing
  • • Use familiar symbols

Don't

  • • Don't mix different icon styles
  • • Don't use icons without context
  • • Don't make icons too small to see
  • • Don't use obscure symbols
Previous Color system Next Layout and spacing