Foundations

Iconography

UX4G standardizes on Material Design Icons (Material Symbols) as the primary icon system for all government digital services. This ensures visual consistency, universal recognition, and accessibility compliance across India's diverse digital ecosystem.

2,500+

Available icons

Style variants

WCAG AA

Accessibility compliant

Variable

Font with optical sizing

Why Iconography

The decision to standardize on UX4G Iconography reflects our commitment to building government services that are universally accessible, instantly recognizable, and maintainable at national scale.

smartphone

Android Ecosystem Familiarity

India's 600M+ Android users already recognize Material icons. This reduces cognitive load and learning curves for citizens accessing government services.

accessibility_new

Accessibility-First Design

Material Symbols are designed with optical sizing, weight axes, and WCAG-compliant contrast ratios built into the variable font system.

translate

Multilingual Clarity

Icons transcend language barriers. With 13 supported languages and diverse literacy levels, universally recognized icons reduce dependence on text-only communication.

verified

Semantic Consistency

Material's naming conventions and categorization ensure consistent meaning across departments. A "verified" icon means the same thing everywhere.

corporate_fare

Enterprise-Grade Support

Backed by Google's design team with regular updates, comprehensive documentation, and long-term stability guarantees suitable for government infrastructure.

scale

Scalability for Public Services

2,500+ icons cover every government service category — from healthcare to agriculture, banking to education — without needing custom icon creation.

Icon Philosophy

Government iconography must prioritize clarity, universality, and trust. Every icon choice should reduce ambiguity and support citizens in completing tasks efficiently.

Guiding Principles

check_circleCitizen-first iconography — Icons must be immediately understood by users of all literacy levels, ages, and technical backgrounds.
check_circleUniversal recognition — Prefer globally understood metaphors over culturally specific or abstract symbols.
check_circleSingle-purpose semantics — Each icon represents one concept. Never reuse icons for different meanings across contexts.
check_circleAvoid decorative-only usage — Every icon must serve a functional purpose: aiding navigation, indicating status, or supporting comprehension.
check_circleRTL-aware design — Directional icons (arrows, chevrons) must mirror in RTL layouts (Urdu). Non-directional icons remain unchanged.

Filled vs Outlined

Outlined (Default)

Use for all standard interface elements. Outlined icons are lighter, less visually dominant, and work well at all sizes. This is the UX4G default.

Filled

Reserve for active/selected states only. Filled icons create visual weight that indicates the current selection in navigation, tabs, or toggle groups.

Consistency Rule

Never mix outlined and filled icons in the same toolbar, navigation bar, or action group. Choose one style per surface and maintain it.

Icon Variants

UX4G iconography offers four style variants. UX4G recommends Outlined or Rounded for citizen-facing services, as their softer, more approachable appearance enhances legibility and reduces cognitive load for diverse audiences. Sharp and Filled variants are reserved for specific use cases.

Outlined

Recommended

Default for citizen-facing services. Clean, minimal stroke-based icons that maintain clarity at small sizes.

Use case: Primary recommendation for all UX4G interfaces

Rounded

Recommended

Softer appearance with rounded terminals. Preferred for approachable, citizen-friendly interfaces.

Use case: Citizen portals, onboarding flows, help sections

Sharp

Geometric precision with sharp corners. Used for data-heavy administrative interfaces.

Use case: Officer dashboards, data tables, technical documentation

Filled

Solid filled variants for emphasis and active states. Use sparingly for selected/active indicators.

Use case: Active navigation states, selected items, toggle indicators

UX4G Default Configuration

Font family: Material Symbols Outlined

Weight: 400 (regular)

Optical size: 24px (auto-adjusts with font-size)

Grade: 0 (standard contrast)

Fill: 0 (outlined) — set to 1 for active states only

Icon Sizing System

UX4G utilizes explicit CSS utility classes for icon sizing to maintain precision and consistency across all government digital services.

CSS Utility Classes

Use these classes to explicitly set icon sizes. The default size is 16px unless overridden.

star_border.ux4g-fs-11

star_border.ux4g-fs-12

star_border.ux4g-fs-14

star.ux4g-fs-16Default

star_border.ux4g-fs-18

star_border.ux4g-fs-20

star_border.ux4g-fs-24

star_border.ux4g-fs-28

star_border.ux4g-fs-32

star_border.ux4g-fs-36

star_border.ux4g-fs-40

star_border.ux4g-fs-52

star_border.ux4g-fs-60

Icon Categories

Icons are organized into semantic categories aligned with government service domains. Each category has curated icon sets with usage guidance and accessibility notes.

Navigation

Wayfinding and directional cues for application navigation

homehomemenumenuarrow_backarrow backarrow_forwardarrow forwardchevron_rightchevron rightclosecloseexpand_moreexpand morenavigate_nextnavigate next

A11y: Always pair with visible text labels in primary navigation. Use aria-label for icon-only nav buttons.

Identity & Authentication

User identity verification and secure access patterns

personpersonbadgebadgefingerprintfingerprintverified_userverified userlocklockkeykeyshieldshieldadmin_panel_settingsadmin panel settings

A11y: Authentication icons must never be the sole indicator of security state. Combine with text status.

Documents & Files

File management, document handling, and upload workflows

descriptiondescriptionfolderfolderupload_fileupload filedownloaddownloadattach_fileattach filepicture_as_pdfpicture as pdfarticlearticlenote_addnote add

A11y: Use descriptive aria-labels that include file type context (e.g., 'Upload PDF document').

Payments & Finance

Financial transactions, receipts, and payment processing

paymentpaymentaccount_balanceaccount balancereceipt_longreceipt longcurrency_rupeecurrency rupeecredit_cardcredit cardsavingssavingswalletwalletaccount_balance_walletaccount balance wallet

A11y: Payment status icons require text confirmation. Never rely on color alone for transaction state.

Government Services

Public service delivery, governance, and civic workflows

gavelgavelaccount_balanceaccount balancelocal_policelocal policehealth_and_safetyhealth and safetyagricultureagricultureschoolschoolapartmentapartmentdirections_busdirections bus

A11y: Government service icons should use universally recognized metaphors. Avoid culturally ambiguous symbols.

Security & Privacy

Data protection, privacy controls, and security indicators

securitysecurityprivacy_tipprivacy tipverifiedverifiedgpp_goodgpp goodlocklockvpn_keyvpn keyencryptedencryptedshieldshield

A11y: Security state changes must be announced to screen readers. Use aria-live regions for dynamic updates.

Alerts & Feedback

System status, user feedback, and notification patterns

check_circlecheck circlewarningwarningerrorerrorinfoinfonotification_importantnotification importantreportreportnew_releasesnew releasesfeedbackfeedback

A11y: Alert icons must be paired with role='alert' or aria-live. Never use icon color as the only differentiator.

Forms & Input

Form controls, input fields, and data entry patterns

editedittext_fieldstext fieldscheck_boxcheck boxradio_button_checkedradio button checkedtoggle_ontoggle ondate_rangedate rangesearchsearchfilter_listfilter list

A11y: Form field icons are decorative when paired with labels. Use aria-hidden='true' on decorative instances.

Search & Discovery

Content discovery, filtering, and search functionality

searchsearchfilter_altfilter altsortsorttunetunemanage_searchmanage searchtravel_exploretravel explorefind_in_pagefind in pagesaved_searchsaved search

A11y: Search icons in input fields should be decorative. The input's label provides the accessible name.

Communication

Messaging, notifications, and communication channels

mailmailchatchatcallcallsmssmsnotificationsnotificationscampaigncampaignforumforumcontact_supportcontact support

A11y: Notification icons with counts must expose the count to assistive technology via aria-label.

Healthcare

Health services, medical records, and wellness tracking

local_hospitallocal hospitalmedical_servicesmedical servicesvaccinesvaccineshealth_and_safetyhealth and safetymedicationmedicationmonitor_heartmonitor heartemergencyemergencyhealinghealing

A11y: Medical icons require clear, unambiguous meaning. Avoid abstract symbols for critical health information.

Education

Educational services, learning resources, and academic workflows

schoolschoolmenu_bookmenu booksciencesciencecalculatecalculatehistory_eduhistory eduauto_storiesauto storiesquizquizworkspace_premiumworkspace premium

A11y: Education icons should support cognitive accessibility. Use simple, recognizable metaphors.

Agriculture

Agricultural services, land management, and environmental monitoring

agricultureagriculturegrassgrasswater_dropwater dropecoecoparkparkforestforestyardyardcompostcompost

A11y: Use text labels alongside agriculture icons as these metaphors may not be universally recognized.

Banking & Finance

Banking services, financial analytics, and monetary operations

account_balanceaccount balancesavingssavingscurrency_rupeecurrency rupeetrending_uptrending upanalyticsanalyticsreceiptreceiptcalculatecalculatepie_chartpie chart

A11y: Financial data icons must have text equivalents. Charts and graphs need detailed aria-descriptions.

Urban Services

Municipal services, urban infrastructure, and civic utilities

apartmentapartmentlocation_citylocation citydirections_busdirections buslocal_parkinglocal parkingwaterwaterelectric_boltelectric boltconstructionconstructionmapmap

A11y: Location-based icons should include geographic context in their accessible labels.

Accessibility

Accessibility tools, assistive technology indicators, and inclusive design

accessibility_newaccessibility newhearinghearingvisibilityvisibilitytext_increasetext increasecontrastcontrastkeyboardkeyboardtouch_apptouch apprecord_voice_overrecord voice over

A11y: Accessibility feature icons must themselves be fully accessible. Test with multiple assistive technologies.

Icon States & Semantic Tokens

Icons inherit color from their parent element using currentColor. Use UX4G semantic tokens to ensure consistent state representation across themes.

State	Token	Description
Default	--ux4g-color-text-primary	Standard icon color inheriting text color
Hover	--ux4g-color-text-primary-hover	Interactive hover state for clickable icons
Active	--ux4g-color-primary	Pressed/active state during interaction
Disabled	--ux4g-color-text-disabled	Non-interactive disabled state (0.38 opacity)
Selected	--ux4g-color-primary	Currently selected or active navigation item
Danger	--ux4g-color-feedback-error	Destructive actions (delete, remove, reject)
Success	--ux4g-color-feedback-success	Positive confirmation (approved, completed)
Warning	--ux4g-color-feedback-warning	Caution states (pending review, expiring)
Info	--ux4g-color-feedback-info	Informational context (help, details, tips)

Usage Guidelines

check_circleDos

checkAlways pair icons with visible text labels for primary actions
checkUse Material Symbols' optical size axis for size-appropriate rendering
checkMaintain consistent icon weight (400) across the interface
checkUse semantic color tokens on the parent element for theming
checkCombine status icons with text in alerts, badges, and notifications
checkTest icon clarity at the smallest size used in your interface
checkUse aria-hidden='true' for decorative icons paired with text
checkProvide aria-label for icon-only interactive elements

cancelDon'ts

closeDo not mix outlined and filled variants in the same surface
closeDo not use icons as the sole communication channel for errors or status
closeDo not shrink icons below 12px — they become illegible
closeDo not use color alone to convey meaning (WCAG 1.4.1)
closeDo not create custom icons when a Material Symbol exists for the concept
closeDo not use decorative or playful icon styles in government interfaces
closeDo not animate icons in ways that could trigger vestibular disorders
closeDo not mix Material Design Icons with other icon libraries in the same view

Accessibility

Icons must be accessible to all users, including those using screen readers, keyboard navigation, and high-contrast modes. Follow WCAG 2.1 AA requirements.

Decorative Icons (paired with text)

When an icon accompanies a visible text label, hide it from assistive technology.

<button>
  <span class="material-symbols-outlined"
        aria-hidden="true">download</span>
  Download Certificate
</button>

Meaningful Icons (standalone)

When an icon is the only content in an interactive element, provide an accessible label.

<button aria-label="Close dialog">
  <span class="material-symbols-outlined"
        aria-hidden="true">close</span>
</button>

Minimum Contrast

Icons must meet 3:1 contrast ratio against their background (WCAG 1.4.11 Non-text Contrast).

• Light theme: minimum #767676 on white
• Dark theme: minimum #949494 on dark backgrounds
• High contrast: use full black/white

Cognitive Accessibility

Design for users with cognitive disabilities and low digital literacy.

• Use concrete, recognizable metaphors (house for home, envelope for mail)
• Avoid abstract symbols that require learned associations
• Never use icon animation that cannot be paused (WCAG 2.2.2)
• Limit icon-only interfaces — always provide text alternatives

Touch Target Requirements

Minimum Size

44×44px interactive area (WCAG 2.5.8 Target Size)

Spacing

8px minimum between adjacent touch targets

Padding Strategy

Add transparent padding around small icons to meet target size

Code Usage

Material Symbols can be used via the variable font (recommended for web) or as individual SVG imports. UX4G provides wrapper components for React, Angular, and Flutter.

Sizing via Utility Classes

UX4G provides font-size utilities to scale icons easily without custom CSS.

<!-- Default size (16px) -->
<span class="material-symbols-outlined">home</span>

<!-- Larger sizes -->
<span class="material-symbols-outlined ux4g-fs-18">home</span>
<span class="material-symbols-outlined ux4g-fs-20">home</span>
<span class="material-symbols-outlined ux4g-fs-24">home</span>
<span class="material-symbols-outlined ux4g-fs-30">home</span>

React (Material Symbols Font)

// Install the font
npm install material-symbols

// Import in your app entry
import 'material-symbols/outlined.css';

// Usage in components
function DownloadButton() {
  return (
    <button className="flex items-center gap-2">
      <span className="material-symbols-outlined"
            aria-hidden="true">
        download
      </span>
      Download Certificate
    </button>
  );
}

React (@mui/icons-material)

// Install MUI icons
npm install @mui/icons-material @mui/material

// Named imports (tree-shakeable)
import DownloadIcon from
  '@mui/icons-material/Download';
import CheckCircleIcon from
  '@mui/icons-material/CheckCircle';

function StatusBadge() {
  return (
    <span className="flex items-center gap-1">
      <CheckCircleIcon fontSize="small"
        aria-hidden="true" />
      Approved
    </span>
  );
}

Angular

// Add to angular.json styles
"styles": [
  "material-symbols/outlined.css"
]

// Template usage
<button mat-button>
  <span class="material-symbols-outlined"
        aria-hidden="true">download</span>
  Download Certificate
</button>

// Or with Angular Material
import { MatIconModule } from
  '@angular/material/icon';

<mat-icon aria-hidden="true">
  download
</mat-icon>

Flutter

// Material icons are built into Flutter
import 'package:flutter/material.dart';

// Usage
Icon(
  Icons.download,
  size: 24,
  color: Theme.of(context).primaryColor,
  semanticLabel: 'Download certificate',
)

// Icon button with accessibility
IconButton(
  icon: const Icon(Icons.close),
  tooltip: 'Close dialog',
  onPressed: () => Navigator.pop(context),
)

Icon Governance

Standards for icon usage approval, review processes, and compliance checks across government service implementations.

Approved Usage

check Material Symbols (Outlined) for all new citizen-facing interfaces
check Material Symbols (Rounded) for onboarding and help flows
check @mui/icons-material for React component libraries
check Flutter built-in Icons class for mobile applications
check UX4G custom icon system for government-specific metaphors

Restricted Usage

close Third-party icon libraries (Font Awesome, Heroicons, etc.) in new code
close Custom SVG icons without design review approval
close Emoji or Unicode symbols as functional icons
close Animated icons without reduced-motion fallback
close Icon-only interfaces without text alternatives

Icon Review Process

Propose

Submit icon usage request with context and rationale

Review

Design team evaluates semantic fit and accessibility

Test

Validate at all sizes, themes, and with assistive tech

Approve

Add to approved icon registry with usage documentation

Figma & Design Tooling

Design teams should use Material Symbols in Figma for all new work. This ensures design-to-code consistency and reduces handoff friction.

Recommended Figma Plugins

extension
Material Symbols
Official Google plugin for browsing and inserting Material Symbols directly into Figma frames
apps
Iconify
Multi-library icon browser with Material Design Icons included — useful for comparing alternatives

Figma Workflow

1. Use Material Symbols plugin to insert icons
2. Set icon instances as components for easy swapping
3. Link icon size to UX4G spacing tokens (Auto Layout)
4. Use Figma variables for icon color (maps to semantic tokens)
5. Name layers with the Material Symbol name (e.g., "icon/download")
6. Document icon usage in component descriptions

Icon Naming Convention in Figma

Follow this naming pattern for icon layers and components:

Layer name: icon/{material_symbol_name}

Component: Icon / {Category} / {Name}

Example: Icon / Navigation / arrow_back

Variant: Style=Outlined, Size=24

Resources

External references, toolkits, and documentation for working with Material Design Icons in UX4G projects.

Iconography

Why Iconography

Android Ecosystem Familiarity

Accessibility-First Design

Multilingual Clarity

Semantic Consistency

Enterprise-Grade Support

Scalability for Public Services

Icon Philosophy

Guiding Principles

Filled vs Outlined

Icon Variants

Outlined

Rounded

Sharp

Filled

Icon Sizing System

CSS Utility Classes

Icon Categories

Navigation

Identity & Authentication

Documents & Files

Payments & Finance

Government Services

Security & Privacy

Alerts & Feedback

Forms & Input

Search & Discovery

Communication

Healthcare

Education

Agriculture

Banking & Finance

Urban Services

Accessibility

Icon States & Semantic Tokens

Usage Guidelines

check_circleDos

cancelDon'ts

Accessibility

Decorative Icons (paired with text)

Meaningful Icons (standalone)

Minimum Contrast

Cognitive Accessibility

Touch Target Requirements

Code Usage

Sizing via Utility Classes

React (Material Symbols Font)

React (@mui/icons-material)

Angular

Flutter

Icon Governance

Approved Usage

Restricted Usage

Icon Review Process

Figma & Design Tooling

Recommended Figma Plugins

Figma Workflow

Icon Naming Convention in Figma

Resources

Material Symbols Browser

Material Design 3 Icon Guidelines

GitHub Repository

npm: material-symbols

npm: @mui/icons-material