Design system and site audit: Icons

Overview

Update the design system's listing of iconography to accommodate recent additions and changes.

Details

Our design system has multiple issues.

• Missing icons
  • Ex. Sort icons
• Icons that are present are inconsistent in their style
  • Ex. Create Project pagination icons use the Material Design "Rounded" style while the ones on the My Project page use the "Outlined" style. Icons should use the "Filled" style, and exceptions—and their reasons for being exceptions—should be made explicit in the design system.
  • Use the LADOT Style Guide listed in the Resources section as a guide when choosing icon styles.
• Icons have the wrong color and size
  • Ex. The filter icon appears as black in our design system but appears as white and navy blue on the site
• Icons are missing context
  • Ex. The CSV Download icon is from Font Awesome, and that's because the stakeholders wanted that icon specifically, even though it does not conform to the rest of the Material Design library we're using.

Please conduct an audit of our design system and ensure that all icons are listed, consistent, accurate, and explained.

Once the audit has been conducted, please make sure that the site is consistent with the updated design system.

Action Items

• Create a slide for this issue on the Staging deck and add to resources below
• Update the iconography in Figma design system.
  • Add missing icons.
  • Make icon styles consistent.
  • Make icon colors and size accurate.
  • Add missing context about icon usage.
• Write bugs for any instances where the Dev site is inconsistent with the updates made to the iconography in the design system.
• Review with the design team. Update if needed based on feedback.
• Review with the product, development, and research teams. Update if needed based on feedback.
• Get Stakeholder sign-off via the stakeholder meeting slide deck.
• Update the Style Guide Presentation with any updates from this issue.
• Reassign any previous assignees to this issue.
• Close this issue.

Resources

Figma

• Full Design System

Google Drive

• LADOT Style Guide

Slides

• Staging Deck
  • Staging Deck, Issue 2227, slide 1
  • Staging Deck, Issue 2227, slide 1
• Release Deck
  • 2026-02-17 Release Deck, Issue 2227, slide 1
  • 2026-02-17 Release Deck, Issue 2227, slide 2

Start with the Figma Full Design System and compare its iconography with the LADOT Style Guide and the examples in this issue. Done means all icons are listed, consistent, accurate, and documented with their usage context, site inconsistencies have follow-up bugs, and the required team reviews and stakeholder sign-off are complete.