Modus Icons in CSS

Modus Icons 2.0 with two delivery modes from the same build:

• CSS mask sheets — default for modern browsers
• Icon fonts — only when you must support engines without CSS mask

Pick one mode for your product. Do not load mask CSS and font CSS on the same page — they share .modus-icon-* class names but paint differently and will conflict.

• No JavaScript required for either mode
• Regular, fill, and duotone sets (true duotone needs the CSS mask path)
• Tint via color / currentColor
• Same markup: <i class="modus-icon-house" aria-hidden="true"></i>

Which mode should I use?

| Choose | When | |--------|------| | CSS mask (modus-icons-*.css) | Default. Modern apps, theme tint, CSS-native icon swaps, or true duotone. | | Icon font (modus-icons-font-*.css) | Only when the product must run in browsers without CSS mask (for example IE11 or Opera Mini). |

Choose by the product’s browser support, not per icon. Font glyphs for regular/duotone are stroke-traced and single-color; if you need real duotone, use CSS mask.

These fonts are built from the same 2.0 glyphs in this package — not the old @trimble-oss/modus-icons 1.0 package.

Usage — CSS mask (modern)

<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" />

<i class="modus-icon-house" aria-hidden="true"></i>

.modus-icon-house {
  color: hotpink;
  width: 2rem;
  height: 2rem;
}

Usage — icon font (legacy / no CSS mask)

Use this instead of the mask sheets above, not in addition to them.

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

<i class="modus-icon-house" aria-hidden="true"></i>

Tint with color as usual. Font CSS expects the matching files under fonts/{regular,fill,duotone}/ from this package.

Browser support

| Delivery | Browsers | |----------|----------| | CSS mask (default) | Chrome / Edge 120+, Safari / iOS 15.4+, Firefox 53+, Opera 106+, Samsung Internet 25+ | | CSS mask + -webkit-mask-* | Older WebKit/Blink partial-support versions (included in generated CSS) | | Icon font (this package) | IE11, Opera Mini, and other engines without CSS mask support |

See caniuse css-masks.

Build & test page

npm run build            # CSS masks + icon fonts (what npm publishes)
npm run build:svg        # optional: write loose svg/ files locally (not in the package)
npm run build:mappings   # optional: v1 alias map for temp/ preview
npm run serve            # open /temp/ to compare CSS vs font rendering

Each mask stylesheet is approx 900 KB (90 KB gzipped) and includes all icons. Trim unused variables to reduce size.

Adding icons (not in Phosphor)

Drop 24×24 SVGs into icons-extra/ using the same slugs as CSS classes:

• truck-clock.svg → .modus-icon-truck-clock
• truck-clock-fill.svg → .modus-icon-truck-clock-fill
• truck-clock-duotone.svg → .modus-icon-truck-clock-duotone

Use fill="currentColor" (and opacity on duotone secondary paths). Same-slug files override Phosphor. Then run npm run build.

Advantages of CSS mask (modern)

• Theme-aware — tint via color without separate assets per theme
• One request — all icons in one CSS file
• No webfont — no FOUT or ligature quirks
• CSS-native swaps — e.g. mask-image: var(--modus-icon-lightbulb-fill) on hover
• True duotone — secondary opacity preserved in the SVG mask

License

MIT