mates-icons

Tree-shakeable SVG icon components. No CDN, no font loading, no FOUC. Pass icons directly to mates-ui component props.

Quick start

import { HomeIcon, SearchIcon, ArrowForwardIcon } from "mates-icons";

// Standalone in a template
html`${HomeIcon({ size: 24, color: "var(--md-color-primary)" })}`;

// As an icon prop on any mates-ui component
Button("Search", { icon: SearchIcon({ size: 18 }) });
IconButton({ icon: ArrowForwardIcon({ fill: 1 }), label: "Next" });

Import syntax

import { html, renderApp } from 'mates';

import { Text } from 'mates-ui';

import { HomeIcon, SearchIcon, StarIcon } from 'mates-icons';

const App = () => () => html`

<x-col gap="var(--md-space-3)">

${Text("Import syntax:", { type: "label-sm", color: "muted" })}

${Text('import { HomeIcon } from "mates-icons/home";', { type: "body-sm", style: { fontFamily: "monospace" })}

${Text('import { HomeIcon } from "mates-icons";', { type: "body-sm", style: { fontFamily: "monospace" } })}

<x-row gap="var(--md-space-4)" align="center">

${HomeIcon({ size: 24 })}

${SearchIcon({ size: 24 })}

${StarIcon({ size: 24 })}

</x-row>

</x-col>

renderApp(App, document.getElementById('app'));

Sample grid

import { html, renderApp } from 'mates';

import { Text } from 'mates-ui';

import { HomeIcon, SearchIcon, SettingsIcon, PersonIcon, NotificationsIcon, MenuIcon, AddIcon, DeleteIcon, EditIcon, CheckIcon, StarIcon, FavoriteIcon, BookmarkIcon, ShareIcon, DownloadIcon, MailIcon, LockIcon, VisibilityIcon, DarkModeIcon, PaletteIcon } from 'mates-icons';

const ICONS = [

{ name: "home", fn: HomeIcon },

{ name: "search", fn: SearchIcon },

{ name: "settings", fn: SettingsIcon },

{ name: "person", fn: PersonIcon },

{ name: "notifications", fn: NotificationsIcon },

{ name: "menu", fn: MenuIcon },

{ name: "add", fn: AddIcon },

{ name: "delete", fn: DeleteIcon },

{ name: "edit", fn: EditIcon },

{ name: "check", fn: CheckIcon },

{ name: "star", fn: StarIcon },

{ name: "favorite", fn: FavoriteIcon },

{ name: "bookmark", fn: BookmarkIcon },

{ name: "share", fn: ShareIcon },

{ name: "download", fn: DownloadIcon },

{ name: "mail", fn: MailIcon },

{ name: "lock", fn: LockIcon },

{ name: "visibility", fn: VisibilityIcon },

{ name: "dark_mode", fn: DarkModeIcon },

{ name: "palette", fn: PaletteIcon },

];

const App = () => () => html`

${ICONS.map(({ name, fn }) => html`

<div style="display:flex;flex-direction:column;align-items:center;gap:var(--md-space-1);

padding:var(--md-space-3) var(--md-space-2);border-radius:var(--md-radius-md);">

${fn({ size: 24 })}

${Text(name, { type: "label-sm", color: "muted", truncate: true, style: { fontSize: "0.63rem", maxWidth: "100%" } })}

</div>

`)}

Sizes

import { html, renderApp } from 'mates';

import { Text } from 'mates-ui';

import { StarIcon } from 'mates-icons';

const App = () => () => html`

<x-row gap="var(--md-space-3)" align="flex-end">

${[12, 16, 18, 20, 24, 28, 32, 40, 48].map((s) => html`

<x-col align="center" gap="var(--md-space-1)">

${StarIcon({ size: s })}

${Text(String(s), { type: "label-sm", color: "muted" })}

</x-col>

`)}

</x-row>

renderApp(App, document.getElementById('app'));

Fill variation

import { html, renderApp } from 'mates';

import { Text } from 'mates-ui';

import { FavoriteIcon, StarIcon, BookmarkIcon } from 'mates-icons';

const App = () => () => html`

<x-row gap="var(--md-space-5)" align="center">

<x-col align="center" gap="var(--md-space-1)">

${FavoriteIcon({ size: 32, fill: 0 })}

${Text("fill: 0", { type: "label-sm", color: "muted" })}

</x-col>

<x-col align="center" gap="var(--md-space-1)">

${FavoriteIcon({ size: 32, fill: 1 })}

${Text("fill: 1", { type: "label-sm", color: "muted" })}

</x-col>

<x-col align="center" gap="var(--md-space-1)">

${StarIcon({ size: 32, fill: 0 })}

${Text("fill: 0", { type: "label-sm", color: "muted" })}

</x-col>

<x-col align="center" gap="var(--md-space-1)">

${StarIcon({ size: 32, fill: 1 })}

${Text("fill: 1", { type: "label-sm", color: "muted" })}

</x-col>

<x-col align="center" gap="var(--md-space-1)">

${BookmarkIcon({ size: 32, fill: 0 })}

${Text("fill: 0", { type: "label-sm", color: "muted" })}

</x-col>

<x-col align="center" gap="var(--md-space-1)">

${BookmarkIcon({ size: 32, fill: 1 })}

${Text("fill: 1", { type: "label-sm", color: "muted" })}

</x-col>

</x-row>

renderApp(App, document.getElementById('app'));

Colors

import { html, renderApp } from 'mates';

import { Text } from 'mates-ui';

import { CircleIcon } from 'mates-icons';

const COLORS = [

{ label: "primary", token: "var(--md-color-primary)" },

{ label: "error", token: "var(--md-color-error)" },

{ label: "success", token: "var(--md-color-success)" },

{ label: "warning", token: "var(--md-color-warning)" },

{ label: "muted", token: "var(--md-color-text-muted)" },

{ label: "disabled", token: "var(--md-color-text-disabled)" },

];

const App = () => () => html`

<x-row gap="var(--md-space-4)" align="center" wrap>

${COLORS.map(({ label, token }) => html`

<x-col align="center" gap="var(--md-space-1)">

${CircleIcon({ size: 28, color: token })}

${Text(label, { type: "label-sm", color: "muted" })}

</x-col>

`)}

</x-row>

renderApp(App, document.getElementById('app'));

mates-icons

import { HomeIcon, SearchIcon } from "mates-icons";

Prop	Type	Default	Description
`attr`	`AttrMap`	—	HTML attributes on the root element.
`classes`	`string \| string[]`	—	Extra root classes — joined and appended after built-in classes.
`color`	`string`	`currentColor`	SVG fill color. Defaults to inheriting surrounding text color.
`data`	`DataAttrMap`	—	Root `data-*` map (`testId` → `data-testid`). `testId` prop / `attr` win over `data`.
`fill`	`0 \| 1`	`0`	0 = outlined, 1 = filled.
`id`	`string`	—	Root `id` shorthand (`attr.id` wins). Form native-control `id` props are unchanged.
`label`	`string`	—	aria-label for accessibility.
`on`	`OnEventMap`	`—`	DOM event handlers on the root element.
`size`	`number \| string`	`24`	Width & height in px (number) or any CSS length string.
`style`	`StyleMap`	—	Root inline CSS (`style` prop; `style` wins if both set).
`style`	`StyleMap`	`—`	Inline CSS on the root element.

Caveats

No font required — every icon is an inline SVG TemplateResult.
Pass icons directly to mates-ui component props: `Button('Save', { icon: SaveIcon() })`
`fill: 1` renders the filled variant; `fill: 0` (default) renders the outlined variant.