Icon
Use GdsIcon with icons imported from @granicus/gds-core. GDS re-exports a curated, demand-driven Material icon set so apps share one import path and sizing API.
Import the icon you need from @granicus/gds-core and pass it as the icon prop. Sizes come from GDS tokens by default.
Default
A basic icon. Import an icon and pass it as icon. Default size is medium.
Sizes
Use size for small (16px), medium (20px), or large (24px). Prefer small in dense UI, medium inline with body text, and large in headers or empty states.
Color
By default the icon inherits surrounding text color. Pass sx={{ color }} with a value from primitiveTokens (e.g. red500, blue500).
Icon gallery
A curated, demand-driven set grown from real product usage - not the full Material catalog. Search, select an icon, and copy a ready-to-use import from @granicus/gds-core.
Missing something? Use Request an icon in the gallery header - it opens a new GDS GitLab work item with a short title and description template you can finish filling in.
Requesting an icon
- Search this gallery (and Material Icons) first
- Prefer an existing Material icon so GDS can re-export it cleanly
- Click Request an icon in the gallery header - a work item opens with a basic template
- Fill in the icon name, product, use case, and an icon link (Material or another source - or a screenshot / Figma)
Do not import icons directly from @mui/icons-material in product code. Wait for the GDS export, or pair with design if a custom glyph is required.
Props
External references
For the full and always up-to-date props, use the MUI references below.