icon pack

every icon. one place.

pixel art on a 24px grid. the same drawing on the store, the apps and everywhere else.

132icons
22variants
24pxgrid
5.7kbweb font

get it.

pick a format. copy the line.

script tag

one line. then use the element anywhere. no font, no build step.

<script src="https://icons.munchterm.co.uk/munchterm-icons.umd.js"></script>
<mt-icon name="cart"></mt-icon>
<mt-icon name="cart" size="48" label="cart"></mt-icon>

web font

one stylesheet. the icon takes the colour of the text around it.

<link rel="stylesheet" href="https://icons.munchterm.co.uk/munchterm-icons.css">
<i class="mti mti-cart" aria-hidden="true"></i>
<i class="mti mti-cart mti--48" aria-hidden="true"></i>

svg sprite

every icon as a symbol. point at the one you want.

<svg width="24" height="24" fill="currentColor">
  <use href="https://icons.munchterm.co.uk/sprite.svg#mti-cart"/>
</svg>

js module

paths and helpers for react native, hydrogen and scripts. typed.

import { iconPath, iconSvg } from "https://icons.munchterm.co.uk/index.js";
// in the monorepo: from "@munchterm/icons"
<Path d={iconPath("cart")} fill={colour} />

single files

one svg per icon. for the admin, figma, or anything that wants a file.

https://icons.munchterm.co.uk/icons/cart.svg
https://icons.munchterm.co.uk/icons/grinder.svg

json

names, codepoints, paths and aliases. for anything that isn't js.

https://icons.munchterm.co.uk/icons.json

browse.

click one for its code.

variants

nothing by that name. try another word.

to consolidate.

the same thing, drawn more than once. all live today, so nothing breaks. one per row should stay.