Modus Icons – CSS Variables

Modus Icons using CSS custom properties and SVG masks.

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

How to use

Include one or more stylesheets (regular, fill, and/or duotone):

<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 icon is exposed as a CSS variable --modus-icon-<name> whose value is a url("data:image/svg+xml;utf8,...") data URI.

Can be used just like an icon font, with the class name being the icon name

<i class="modus-icon-heart"></i>

Can be styled with CSS

.modus-icon-heart {
  color: hotpink;
}

CSS variables can be used dynamically

.modus-icon-lightbulb {
   color: hotpink;
 }
 .modus-icon-lightbulb:hover {
   mask-image: var(--modus-icon-lightbulb-fill);
 }
 .modus-icon-lightbulb:active {
   mask-image: var(--modus-icon-skull-fill);
 }

Icon gallery

Loading…

Filter by name: