Icon

Icon System

Other than icons from the UMD Design System, this design system also uses Lucide Icons for its iconography. Lucide is an open-source icon library that provides a consistent and modern set of SVG icons, ensuring visual clarity and accessibility across the Libraries' digital presence.

Implementation

Lucide is bundled with the theme (js/lucide.min.js) — no external request is made. To render an icon, add a data-lucide attribute with the icon name (e.g. data-lucide="chevron-right"); the script replaces it with the corresponding inline SVG. Refer to the Lucide icon directory for available names. Components that accept an icon (for example, the Icon variant of the Card) take a Lucide icon name as a prop.

For developers, icon recoloring on hover is handled by the ani-icon-interactive utility. See Design Tokens and Utility Classes.