Icon Cheatsheet

One API. Every icon. Zero config.
200,000+ icons from 150+ libraries. Just use prefix:name.

ph lucide mdi bx + 146 more…

How it works

You write

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

2. Normalize

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

3. Render

Astro: SVG inlined at build time. Zero JS.
Svelte: Runtime via Iconify API.

Usage

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

<!-- Any prefix:name -->
<Icon icon="ph:house" />
<Icon icon="lucide:search" />
<Icon icon="mdi:account" />

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

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

<!-- Same API, same tokens -->
<Icon icon="ph:house" />
<Icon icon="lucide:search" />
<Icon icon="mdi:account" />

<!-- 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/ui/icons/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

Mix & match

Use icons from different libraries in the same template. No config files. No declarations. Just use the prefix.

ph:plant

lucide:leaf

mdi:flower

bx:leaf

<!-- All in the same template — no configuration needed -->
<Icon icon="ph:plant" />       <!-- Phosphor -->
<Icon icon="lucide:leaf" />    <!-- Lucide -->
<Icon icon="mdi:flower" />     <!-- Material Design -->
<Icon icon="bx:leaf" />        <!-- BoxIcons -->

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

These four icon sets are installed as @iconify-json/* packages and resolve instantly at build time — no network requests. Any other Iconify prefix still works via the API fallback.

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

Lucide

lucide:* Browse all →

lucide:search

lucide:home

lucide:settings

lucide:heart

lucide:star

lucide:zap

lucide:globe

lucide:layers

lucide:terminal

lucide:sparkles

lucide:flame

lucide:leaf

lucide:shield

lucide:database

lucide:cloud

lucide:wifi

Material Design

mdi:* Browse all →

mdi:home

mdi:account

mdi:cog

mdi:magnify

mdi:bell

mdi:heart

mdi:star

mdi:email

mdi:phone

mdi:map-marker

mdi:camera

mdi:music

mdi:weather-sunny

mdi:lightbulb

mdi:palette

mdi:rocket-launch

BoxIcons

bx:* Browse all →

bx:home

bx:search

bx:user

bx:cog

bx:heart

bx:star

bx:bell

bx:envelope

bx:calendar

bx:camera

bx:cloud

bx:moon

bx:sun

bx:world

bx:book

bx:rocket

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"`	Runtime via `@iconify/svelte`.
JavaScript / utilities	`import { normalizeIcon } from "@stnd/icon"`	Resolves tokens to `prefix:name`.

Resolution order (Astro)

Installed package — if @iconify-json/{prefix} is in your dependencies, the icon resolves from disk. No network.
Iconify API — if no package is installed, the icon is fetched from api.iconify.design at build time. Works for any of the 150+ sets. No config.
Cache — once resolved, icons are cached in memory for the rest of the build.

Add more libraries

Install any @iconify-json/* package for instant offline resolution. Without it, the API fallback still works — installing just makes builds faster.

pnpm add @iconify-json/tabler       # Tabler Icons
pnpm add @iconify-json/heroicons    # Heroicons
pnpm add @iconify-json/ri           # Remix Icon
pnpm add @iconify-json/iconoir      # Iconoir

Then use them immediately — no registration, no config:

<Icon icon="tabler:heart" />
<Icon icon="heroicons:home" />
<Icon icon="ri:github-fill" />
<Icon icon="iconoir:community" />

Browse all 200,000+ icons at icon-sets.iconify.design .