Intelligence Community Design System

The Design System uses a reduced number of the Material Design Icons library. You can use other Material Design Icons if you need to, but keep the common icons consistent.

We use the extended open source icon set because our apps often need to use uncommon icons.

Don't rely on icons when your layout becomes complex as this can make it harder to understand.

Consider alternatives such as dropdowns, merged buttons and splitting a layout across multiple pages.

Provide a text label when you use icons. Even if the text isn't visible on the screen, assistive technology needs to describe the icon.

Use tooltips on icons or icon buttons so that the meaning of an icon is obvious.

Adding theslot attribute to SVGs within a Typescript file produces an error due to slot not being a SVG prop.<SlottedSVG> removes this error and can be used with native SVGs or Material Design Icons (MDI) .