# Modus Icons in CSS

Modus Icons using CSS custom properties and SVG masks.

- No JavaScript, dependencies, SVGs or webfonts needed!
- 100% accessible, fast and easy-to-use
- Includes all 1513 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

```html
<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 1513 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](https://caniuse.com/?search=mask-image)). To widen support (e.g. older Safari), use [Autoprefixer](https://github.com/postcss/autoprefixer) to add `-webkit-mask-image` alongside `mask-image`.

## License

[MIT](LICENSE)
