Icon Cheatsheet

One API. Every icon. Zero config.
Static SVGs + animated Lottie — all served from local files.

ph mingcute

How it works

You write

Use any prefix:name or a short token like "search".

Normalize

Tokens resolve to full ids via tokens.js. Prefixed names pass through unchanged.

Render

Astro: SVG inlined at build time. Zero JS.
Svelte: Served as static /icons/* files.

Usage

 In .astro files (zero JS) ---
import Icon from "@stnd/icon/Icon.astro";
---

<!-- Any prefix:name -->
<Icon icon="ph:house" />
<Icon icon="mingcute:home-3-fill" />

<!-- Short tokens -->
<Icon icon="search" />
<Icon icon="plant" />

<!-- Custom size -->
<Icon icon="ph:globe" width="2em" height="2em" /> 
 In .svelte files <script>
  import Icon from "@stnd/icon/Icon.svelte";
</script>

<!-- Same API, same tokens -->
<Icon icon="ph:house" />
<Icon icon="mingcute:home-3-fill" />

<!-- Short tokens -->
<Icon icon="search" />
<Icon icon="plant" />

<!-- Custom size -->
<Icon icon="ph:globe" width="2em" height="2em" /> 

Short tokens

Commonly used icons have short aliases. Write <Icon icon="search" /> instead of <Icon icon="ph:magnifying-glass" />.
Edit packages/icon/tokens.js to add your own.

Essentials

:: ph:magnifying-glass

:: ph:x

:: ph:list

:: ph:arrow-left

:: ph:arrow-right

:: ph:house

:: ph:sliders

Actions

:: ph:floppy-disk

:: ph:pencil-simple

:: ph:trash

:: ph:share-network

:: ph:copy

:: ph:plus

:: ph:minus

:: ph:check

:: ph:terminal-window

:: ph:sign-in

:: ph:sign-out

:: ph:plant

:: ph:download-simple

:: ph:upload-simple

:: ph:arrows-clockwise

Status

:: ph:warning

:: ph:warning-circle

:: ph:check-circle

:: ph:info

:: ph:spinner

Types

:: ph:file-text

:: ph:image

:: ph:folder

:: ph:key

:: ph:link

:: ph:calendar

:: ph:user

:: ph:lock

:: ph:globe

:: ph:envelope

:: ph:star

:: ph:heart

:: ph:eye

:: ph:code

Sizes

Use width and height props. Default is 1.2em.

0.8em

1em

1.2em

1.6em

2em

2.5em

3em

<Icon icon="ph:plant" />                           <!-- 1.2em (default) -->
<Icon icon="ph:plant" width="2em" height="2em" />  <!-- 2em -->
<Icon icon="ph:plant" width="3em" height="3em" />  <!-- 3em -->

Installed libraries

Both icon sets are served as local SVG files from packages/icon/icons/ — no network requests, no @iconify-json/* packages needed. Icons resolve from disk instantly at build time.

Phosphor

ph:* Browse all →

ph:plant

ph:house

ph:magnifying-glass

ph:gear

ph:book-open

ph:chat-circle

ph:bell

ph:lightning

ph:moon

ph:sun

ph:palette

ph:rocket

ph:compass

ph:crown

ph:tree

ph:feather

MingCute

mingcute:* Browse all →

mingcute:home-3-line

mingcute:search-line

mingcute:settings-5-line

mingcute:heart-line

mingcute:star-line

mingcute:user-3-line

mingcute:notification-line

mingcute:calendar-line

mingcute:moon-line

mingcute:sun-line

mingcute:code-line

mingcute:globe-line

mingcute:compass-line

mingcute:palette-line

mingcute:rocket-line

mingcute:close-line

Animated icons

MingCute animated icons are available as Lottie files via the Lottie component. Files live in packages/icon/lottie/ and are served from /lottie/*.json.

arrow-down-line

arrow-left-line

arrow-right-line

arrow-up-line

heart-line

loading-line

loading-3-line

loading-4-line

menu-line

more-2-line

---
import Lottie from "@stnd/icon/Lottie.astro";
---

<Lottie name="loading-line" />
<Lottie name="heart-line" width="3em" height="3em" />
<Lottie name="menu-line" loop={false} />

Resolution order (Astro)

Local SVG file — packages/icon/icons/{prefix}/{name}.svg. Instant, offline, no dependencies.
Installed package — if @iconify-json/{prefix} is in your dependencies, the icon resolves from there. No network.
Iconify API — last resort fetch from api.iconify.design at build time. Works for any of the 150+ sets.

Quick reference

Context	Import	Rendering
`.astro` files	`import Icon from "@stnd/icon/Icon.astro"`	Build-time SSR → inline SVG. Zero JS.
`.svelte` files	`import Icon from "@stnd/icon/Icon.svelte"`	Static `/icons/*` file served at runtime.
Animated	`import Lottie from "@stnd/icon/Lottie.astro"`	Lottie JSON from `/lottie/*.json` via web component.
JavaScript / utilities	`import { normalizeIcon } from "@stnd/icon"`	Resolves tokens to `prefix:name`.