Modus Icons in CSS

Modus Icons using CSS custom properties and SVG masks.

• No JavaScript, dependencies, SVGs or webfonts needed!
• Accessible, fast and easy-to-use
• Includes icons in regular, fill and duotone sets
• Icons can be colored any color by setting a color:
• Icon can be sized any size by setting height and width of the div (the icon scales to fit using mask-size: contain;)

By using CSS custom properties the icons can also be used as background-images instead of masks if needed.

Advantages of using CSS variables

• Theme-aware — Use a single stylesheet and change icon color via color or CSS variables; no need for separate icon assets per theme.
• One request — All icons live in one CSS file instead of hundreds of SVGs or a webfont, reducing HTTP requests.
• Override locally — Set --modus-icon-* or background-color on any element (or a parent) to style icons without extra classes.
• Smaller payload — Icons are defined once as data URIs in variables; repeated use doesn’t duplicate the SVG data in the DOM.
• No JS — No runtime, no icon components, no tree-shaking step; works with plain HTML/CSS and any framework.
• Cascade-friendly — Icons inherit currentColor and variables from the cascade, so they fit naturally into your design system.

Usage

<link rel="stylesheet" href="modus-icons-regular.min.css" />
<link rel="stylesheet" href="modus-icons-fill.min.css" />
<link rel="stylesheet" href="modus-icons-duotone.min.css" />

Each stylesheet is approx 900 KB (90 KB gzipped) and includes all icons. We recommend removing icons you don't need to reduce the file size and improve performance.

Browser support

mask-image is supported unprefixed in all modern browsers (Chrome 120, Safari 15.4, Firefox 53 — caniuse). To widen support (e.g. older Safari), use Autoprefixer to add -webkit-mask-image alongside mask-image.

License

MIT