# Modus Icons in CSS

[![LICENSE](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://raw.githubusercontent.com/trimble-oss/modus-icons-css/main/LICENSE)
[![npm Version](https://img.shields.io/npm/v/@trimble-oss/modus-icons-css)](https://www.npmjs.com/package/@trimble-oss/modus-icons-css)
[![npm Downloads](https://img.shields.io/npm/dt/@trimble-oss/modus-icons-css.svg)](https://www.npmjs.com/package/@trimble-oss/modus-icons-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

```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 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)