Iconography

The GNWT Design System uses the open-source Bootstrap Icons library to provide a consistent, scalable, and accessible set of icons across all GNWT digital products.

Bootstrap Icons provides a comprehensive library of over 2,000 high-quality SVG icons designed for web projects. The Bootstrap Icons library offers both individual SVG files and a convenient sprite file for optimal performance.

For full installation and setup instructions, refer to the Bootstrap Icons installation guide.

Do

  • Use meaningful icons — choose universally recognizable symbols that clearly represent their function or content type.
  • Maintain consistent sizing — use standard icon sizes (16px, 20px, 24px, 32px) within the same context or component.
  • Provide accessible titles — include descriptive titles for informative icons to support screen reader users.
  • Ensure sufficient contrast — maintain a minimum 3:1 color contrast ratio for informative icons against their background.
  • Use decorative mode appropriately — mark purely decorative icons as decorative: true to hide them from assistive technologies.
  • Choose government-appropriate icons — select icons that align with professional government service standards.
  • Test with real users — validate that icon meanings are clear and universally understood.

Don’t

  • Don’t rely solely on icons — always pair critical information icons with text labels or context.
  • Don’t use ambiguous symbols — avoid icons that could be interpreted multiple ways or are culturally specific.
  • Don’t overcrowd interfaces — limit the number of icons per screen to prevent visual clutter.
  • Don’t mix icon styles — maintain consistency between outline, filled, or mixed icon styles within sections.
  • Don’t ignore accessibility — never skip proper labeling for informative icons.
  • Don’t use inappropriate sizes — avoid extremely large decorative icons or tiny informative icons.
  • Don’t forget mobile users — ensure icons remain clear and tappable on small screens.

Using Sprite Method

This is the method that the GNWT OneGov Drupal website implements. This approach loads all icons once and references the cached sprite efficiently, reducing HTTP requests and improving performance across your application.

  1. Download the sprite file from the Bootstrap Icons releases or build it using their npm package.
  2. Include the sprite in your project's assets directory (typically /assets/icons/bootstrap-icons.svg).
  3. Reference icons using SVG <use> elements pointing to the sprite file.
  4. Implement accessibility with proper ARIA attributes and titles for informative icons.
Bootstrap Icon Sprite Example
Open example in a new tab

Inline SVG Bootstrap Icon

If a project needs a minimal subset of icons, it may be preferable to use an inline SVG method instead of the icon sprite. This approach allows for more customization and styling control but requires embedding the full SVG markup. Useful when you need to modify icon properties dynamically.
Star Rating Inline SVG Bootstrap Icon
Open example in a new tab

Informative Icons

The example below showcases icons that convey important information and require proper accessibility attributes. These icons include descriptive titles and are announced by screen readers to ensure all users receive the same information.
Service Disruption Notice
Secure Online Portal
More Details Available
Application Status: Approved
Processing: 5-10 Business Days
Open example in a new tab

Decorative Icons

The example below displays icons used purely for visual enhancement without conveying essential information. These icons are hidden from screen readers using `aria-hidden="true"` and should complement, not replace, text content.
Government Initiative (flag is decorative)
Department Services (building is decorative)
Excellence Program (award is decorative)
Public Institution (bank is decorative)
Open example in a new tab

Alert and Status Icons

The example below presents icons used for system feedback, notifications, and status indicators. These icons often use color coding and must maintain accessibility through both visual and textual cues.

Alert
Warning
Announcement
Information
Open example in a new tab

Document Type Icons

The example below illustrates icons representing different file types and document formats. These help users quickly identify content types and set expectations for downloads or linked resources.
PDF Document
Word Document
Spreadsheet
Download File
Text Document
Archive File
Open example in a new tab

Icons in Components

See the components below for examples of how icons can be utilized in functional components:

Content Guidelines

  • Clear, descriptive titles — Write icon titles that accurately describe the icon’s purpose and help users understand its function.
  • Consistent terminology — Use standardized language for similar icons across the site, avoiding synonyms that could confuse users.
  • Government context — Choose icons that align with government service expectations and professional standards.
  • Cultural sensitivity — Select universally understood symbols that work across diverse user populations.
  • Actionable context — Ensure interactive icons clearly indicate their function through surrounding text or labels.
  • Logical grouping — Organize related icons together and maintain a consistent visual hierarchy.

Implementation Considerations

  • Performance optimization — Use sprite-based icons for better loading performance and reduced HTTP requests.
  • Caching strategy — Implement proper caching headers for icon sprite files to improve repeat-visit performance.
  • Fallback support — Ensure graceful degradation when icons fail to load, with text alternatives always available.
  • Content management — Integrate icon selection into CMS workflows with clear previews and usage guidelines.
  • Version control — Maintain icon library versions and document changes to prevent breaking existing implementations.
  • Cross-browser compatibility — Test icon rendering across different browsers and devices for consistent appearance.

Accessibility Features

  • Semantic markup — Use proper ARIA attributes and role assignments for screen reader compatibility.
  • Keyboard navigation — Ensure all interactive icons are accessible via keyboard with clear focus indicators.
  • Screen reader support — Include descriptive titles for informative icons that are properly announced by assistive technologies.
  • High contrast compliance — Maintain visibility and contrast in Windows High Contrast mode and other accessibility tools.
  • Scalable design — Ensure icons remain clear and functional when users zoom to 200% or use browser magnification.
  • Color independence — Avoid relying solely on color to convey meaning; provide additional visual or textual cues.
  • Focus management — Apply proper focus styling and logical tab order to interactive icons within page navigation.
Updated: Dec 02, 2025