DOCS · 02 / 07

React usage

Import an icon, place it in your JSX and set its size.

Import it, then use it

Every icon is a React component. Import the one you want and put it in your JSX.

EXAMPLE

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

export function CartLink() {
  return <ShoppingCartIcon />;
}

The component name is the object's name with each word capitalised, plus Icon at the end.

The easiest way is to open the library, click an icon and copy the import from there.

Icons are 24 pixels by default. Use the size prop to change that. It sets both the width and the height.

SIZES

<BellIcon size={16} />
<BellIcon size={24} />
<BellIcon size={32} />
<BellIcon size={48} />

You can also pass a CSS value as a string, like size="1.5em", so the icon grows with the text around it.

Take photo

BUTTON

<button type="button" className="flex items-center gap-2">
  <CameraIcon size={20} />
  Take photo
</button>

PROP	DEFAULT	WHAT IT DOES
`size`	`24`	Width and height. A number (pixels) or any CSS size.
`color`	`currentColor`	Colour of monochrome icons. Stickers keep their own colours.
`strokeWidth`	`2`	Line thickness of monochrome icons.
`className`	None	CSS classes for the <svg> element.
`ref`	None	Gives you the <svg> element.

Any other prop you can give an <svg> also works, for example style, onClick or data-* attributes.