Styling

Two kinds of icons

Mochi Icons come in two kinds. How you colour an icon depends on its kind.

The library shows the kind of each icon under its name. Every icon in the set right now is a sticker.

Size

Use the size prop, or set the width and height with CSS. CSS wins over the prop.

<WifiIcon size={32} />

{/* Tailwind */}
<WifiIcon className="size-12" />

{/* Plain CSS */}
<WifiIcon style={{ width: 48, height: 48 }} />

Colour (monochrome icons)

A monochrome icon uses the text colour around it. So if the text is red, the icon is red too. You can also set it yourself.

{/* Follows the text colour of its parent */}
<p style={{ color: "tomato" }}>
  <SomeIcon /> Saved
</p>

{/* Set it directly */}
<SomeIcon color="#2C3E5C" />

{/* Tailwind */}
<SomeIcon className="text-emerald-600" />

To make the lines thinner or thicker, use strokeWidth. The default is 2.

<SomeIcon strokeWidth={1.5} />

Line up an icon with text

Put the icon and the text in a flex row. This keeps them centred on the same line.

<span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
  <CheckIcon size={22} />
  All done
</span>

Want the icon to scale with the font size? Use size="1em".

Hover and animation

Icons are plain <svg> elements, so normal CSS works: transitions, transforms and hover states.

import { BellIcon } from "mochi-icons/BellIcon";

<BellIcon className="transition-transform hover:rotate-12" />