Webfont + CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/moonveilicons/css/moonveilicons.css">

<i class="mvi mvi-outline-heart"></i>
<i class="mvi mvi-solid-heart mvi-lg mvi-beat"></i>

With a bundler: import 'moonveilicons/css/moonveilicons.css'. The font is a single woff2 holding both Styles. Glyphs keep their codepoint across releases, so cached CSS never shows the wrong icon.

Glyphs follow the surrounding text: they take its font-size and color.

Utility classes

These also work on the React and Vue components. The rotate, flip and animation classes also work on <mvi-icon>.

Class	Effect
`mvi-xs` `mvi-sm` `mvi-md` `mvi-lg` `mvi-xl`	16 / 20 / 24 / 32 / 48px
`mvi-rotate-90` `mvi-rotate-180` `mvi-rotate-270`	rotate
`mvi-flip-horizontal` `mvi-flip-vertical`	mirror
`mvi-spin` `mvi-pulse` `mvi-beat`	animate

Animations switch off when the visitor asks for reduced motion.