Icons

Launchpad uses Material Symbols Rounded as its icon font. The framework adds size helpers, inline alignment, and a pre-paint skeleton so icons never flash their fallback text. Icons inherit currentColor and the font supports three variable axes: FILL, wght, GRAD.

Basic Usage

Any element with class="material-symbols-rounded" renders a Material icon. The text inside is the icon name (from fonts.google.com/icons).

home search settings favorite star

<p class="lp-text-sm lp-text-muted lp-mb-3">Any element with <code class="lp-code">class="material-symbols-rounded"</code> renders a Material icon. The text inside is the icon name (from <a href="https://fonts.google.com/icons" target="_blank" rel="noopener">fonts.google.com/icons</a>).</p>
<div class="lp-demo-row lp-items-center lp-gap-3">
    <span class="material-symbols-rounded">home</span>
    <span class="material-symbols-rounded">search</span>
    <span class="material-symbols-rounded">settings</span>
    <span class="material-symbols-rounded">favorite</span>
    <span class="material-symbols-rounded">star</span>
</div>

Size Helpers

Use .lp-icon-xs, .lp-icon-sm, .lp-icon-md, or .lp-icon-lg to size a standalone icon. Default (no helper) is the browser's inherited font-size.

star

xs — 0.875rem

star

sm — 1rem

star

md — 1.25rem

star

lg — 1.5rem

star

custom via style

<p class="lp-text-sm lp-text-muted lp-mb-3">Use <code class="lp-code">.lp-icon-xs</code>, <code class="lp-code">.lp-icon-sm</code>, <code class="lp-code">.lp-icon-md</code>, or <code class="lp-code">.lp-icon-lg</code> to size a <em>standalone</em> icon. Default (no helper) is the browser's inherited <code class="lp-code">font-size</code>.</p>
<div class="lp-demo-row lp-items-center lp-gap-4">
    <div class="lp-text-center">
        <span class="material-symbols-rounded lp-icon-xs">star</span>
        <div class="lp-text-xs lp-text-muted">xs — 0.875rem</div>
    </div>
    <div class="lp-text-center">
        <span class="material-symbols-rounded lp-icon-sm">star</span>
        <div class="lp-text-xs lp-text-muted">sm — 1rem</div>
    </div>
    <div class="lp-text-center">
        <span class="material-symbols-rounded lp-icon-md">star</span>
        <div class="lp-text-xs lp-text-muted">md — 1.25rem</div>
    </div>
    <div class="lp-text-center">
        <span class="material-symbols-rounded lp-icon-lg">star</span>
        <div class="lp-text-xs lp-text-muted">lg — 1.5rem</div>
    </div>
    <div class="lp-text-center">
        <span class="material-symbols-rounded" style="font-size: 2.5rem">star</span>
        <div class="lp-text-xs lp-text-muted">custom via style</div>
    </div>
</div>

Icons in Buttons — Auto-Sized (DO NOT add size helpers)

info

Buttons already size their icons. Adding .lp-icon-xs etc. inside .lp-btn overrides the correct per-size value and makes icons visually wrong. Just put the bare .material-symbols-rounded span inside.

Icon-only buttons — same rule, no size helper needed:

<div class="lp-alert lp-alert-info lp-mb-4">
    <span class="material-symbols-rounded">info</span>
    <div>
        <strong>Buttons already size their icons.</strong> Adding <code class="lp-code">.lp-icon-xs</code> etc. inside <code class="lp-code">.lp-btn</code> overrides the correct per-size value and makes icons visually wrong. Just put the bare <code class="lp-code">.material-symbols-rounded</code> span inside.
    </div>
</div>
<div class="lp-demo-row lp-items-center lp-gap-3 lp-mb-3">
    <button type="button" class="lp-btn lp-btn-primary lp-btn-xs"><span class="material-symbols-rounded">save</span> XS</button>
    <button type="button" class="lp-btn lp-btn-primary lp-btn-sm"><span class="material-symbols-rounded">save</span> SM</button>
    <button type="button" class="lp-btn lp-btn-primary"><span class="material-symbols-rounded">save</span> Default</button>
    <button type="button" class="lp-btn lp-btn-primary lp-btn-lg"><span class="material-symbols-rounded">save</span> LG</button>
    <button type="button" class="lp-btn lp-btn-primary lp-btn-xl"><span class="material-symbols-rounded">save</span> XL</button>
</div>
<p class="lp-text-sm lp-text-muted lp-mb-2">Icon-only buttons — same rule, no size helper needed:</p>
<div class="lp-demo-row lp-items-center lp-gap-3">
    <button type="button" class="lp-btn lp-btn-outline-secondary lp-btn-xs" aria-label="Edit"><span class="material-symbols-rounded">edit</span></button>
    <button type="button" class="lp-btn lp-btn-outline-secondary lp-btn-sm" aria-label="Edit"><span class="material-symbols-rounded">edit</span></button>
    <button type="button" class="lp-btn lp-btn-outline-secondary" aria-label="Edit"><span class="material-symbols-rounded">edit</span></button>
    <button type="button" class="lp-btn lp-btn-outline-secondary lp-btn-lg" aria-label="Edit"><span class="material-symbols-rounded">edit</span></button>
</div>

Inline With Text — use .lp-icon-inline

For an icon sitting next to body text or a heading, use .lp-icon-inline. It sets size to 1.125rem and nudges the baseline so the icon doesn't sit too high.

insights Section heading with leading icon

A paragraph with an bolt inline icon that tracks the line height.

Without .lp-icon-inline — icon sits too high:

A paragraph with bolt a misaligned icon.

With .lp-icon-inline — aligned:

A paragraph with bolt a well-aligned icon.

<p class="lp-text-sm lp-text-muted lp-mb-3">For an icon sitting next to body text or a heading, use <code class="lp-code">.lp-icon-inline</code>. It sets size to 1.125rem and nudges the baseline so the icon doesn't sit too high.</p>
<h3 class="lp-mb-3"><span class="material-symbols-rounded lp-icon-inline">insights</span> Section heading with leading icon</h3>
<p class="lp-mb-3">A paragraph with an <span class="material-symbols-rounded lp-icon-inline">bolt</span> inline icon that tracks the line height.</p>
<p class="lp-text-sm lp-text-muted lp-mb-1">Without <code class="lp-code">.lp-icon-inline</code> — icon sits too high:</p>
<p class="lp-mb-3">A paragraph with <span class="material-symbols-rounded">bolt</span> a misaligned icon.</p>
<p class="lp-text-sm lp-text-muted lp-mb-1">With <code class="lp-code">.lp-icon-inline</code> — aligned:</p>
<p>A paragraph with <span class="material-symbols-rounded lp-icon-inline">bolt</span> a well-aligned icon.</p>

Filled vs Outlined — .icon-filled

Material Symbols supports a FILL axis. Add .icon-filled for the filled form, omit for outline. Useful for selected/hover states.

favorite

outline

favorite

.icon-filled

star

outline

star

.icon-filled

bookmark

outline

bookmark

.icon-filled

<p class="lp-text-sm lp-text-muted lp-mb-3">Material Symbols supports a <code class="lp-code">FILL</code> axis. Add <code class="lp-code">.icon-filled</code> for the filled form, omit for outline. Useful for selected/hover states.</p>
<div class="lp-demo-row lp-items-center lp-gap-4">
    <div class="lp-text-center">
        <span class="material-symbols-rounded lp-icon-lg">favorite</span>
        <div class="lp-text-xs lp-text-muted">outline</div>
    </div>
    <div class="lp-text-center">
        <span class="material-symbols-rounded icon-filled lp-icon-lg">favorite</span>
        <div class="lp-text-xs lp-text-muted">.icon-filled</div>
    </div>
    <div class="lp-text-center">
        <span class="material-symbols-rounded lp-icon-lg">star</span>
        <div class="lp-text-xs lp-text-muted">outline</div>
    </div>
    <div class="lp-text-center">
        <span class="material-symbols-rounded icon-filled lp-icon-lg">star</span>
        <div class="lp-text-xs lp-text-muted">.icon-filled</div>
    </div>
    <div class="lp-text-center">
        <span class="material-symbols-rounded lp-icon-lg">bookmark</span>
        <div class="lp-text-xs lp-text-muted">outline</div>
    </div>
    <div class="lp-text-center">
        <span class="material-symbols-rounded icon-filled lp-icon-lg">bookmark</span>
        <div class="lp-text-xs lp-text-muted">.icon-filled</div>
    </div>
</div>

Weight & Grade (advanced)

Tune stroke weight (wght) and optical thickness (GRAD) via font-variation-settings. Default is 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24.

settings

wght 100

settings

wght 300

settings

wght 400 (default)

settings

wght 600

settings

wght 700

<p class="lp-text-sm lp-text-muted lp-mb-3">Tune stroke weight (<code class="lp-code">wght</code>) and optical thickness (<code class="lp-code">GRAD</code>) via <code class="lp-code">font-variation-settings</code>. Default is <code class="lp-code">'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24</code>.</p>
<div class="lp-demo-row lp-items-center lp-gap-4">
    <div class="lp-text-center">
        <span class="material-symbols-rounded lp-icon-lg" style="font-variation-settings: 'wght' 100;">settings</span>
        <div class="lp-text-xs lp-text-muted">wght 100</div>
    </div>
    <div class="lp-text-center">
        <span class="material-symbols-rounded lp-icon-lg" style="font-variation-settings: 'wght' 300;">settings</span>
        <div class="lp-text-xs lp-text-muted">wght 300</div>
    </div>
    <div class="lp-text-center">
        <span class="material-symbols-rounded lp-icon-lg">settings</span>
        <div class="lp-text-xs lp-text-muted">wght 400 (default)</div>
    </div>
    <div class="lp-text-center">
        <span class="material-symbols-rounded lp-icon-lg" style="font-variation-settings: 'wght' 600;">settings</span>
        <div class="lp-text-xs lp-text-muted">wght 600</div>
    </div>
    <div class="lp-text-center">
        <span class="material-symbols-rounded lp-icon-lg" style="font-variation-settings: 'wght' 700;">settings</span>
        <div class="lp-text-xs lp-text-muted">wght 700</div>
    </div>
</div>

Color — inherits currentColor

Icons render in the current text color. Apply any text-color utility or wrap in an element with a color set.

bolt check_circle error warning info help

<p class="lp-text-sm lp-text-muted lp-mb-3">Icons render in the current text color. Apply any text-color utility or wrap in an element with a color set.</p>
<div class="lp-demo-row lp-items-center lp-gap-3">
    <span class="material-symbols-rounded lp-icon-lg lp-text-primary">bolt</span>
    <span class="material-symbols-rounded lp-icon-lg lp-text-success">check_circle</span>
    <span class="material-symbols-rounded lp-icon-lg lp-text-danger">error</span>
    <span class="material-symbols-rounded lp-icon-lg lp-text-warning">warning</span>
    <span class="material-symbols-rounded lp-icon-lg lp-text-info">info</span>
    <span class="material-symbols-rounded lp-icon-lg lp-text-muted">help</span>
</div>

Icons in Badges, Pills, Chips, Labels

Small inline components already set their own font-size, so the icon sizes naturally. No helper class needed.

check Verified trending_up Up 12% priority_high Urgent

bolt Beta schedule Pending archive Archived

person Alex label Design tag Launchpad

<p class="lp-text-sm lp-text-muted lp-mb-3">Small inline components already set their own font-size, so the icon sizes naturally. No helper class needed.</p>
<div class="lp-demo-row lp-items-center lp-gap-3 lp-mb-3">
    <span class="lp-badge lp-badge-primary"><span class="material-symbols-rounded">check</span> Verified</span>
    <span class="lp-badge lp-badge-success"><span class="material-symbols-rounded">trending_up</span> Up 12%</span>
    <span class="lp-badge lp-badge-danger"><span class="material-symbols-rounded">priority_high</span> Urgent</span>
</div>
<div class="lp-demo-row lp-items-center lp-gap-3 lp-mb-3">
    <span class="lp-pill lp-pill-info"><span class="material-symbols-rounded">bolt</span> Beta</span>
    <span class="lp-pill lp-pill-warning"><span class="material-symbols-rounded">schedule</span> Pending</span>
    <span class="lp-pill lp-pill-secondary"><span class="material-symbols-rounded">archive</span> Archived</span>
</div>
<div class="lp-demo-row lp-items-center lp-gap-3">
    <span class="lp-chip"><span class="material-symbols-rounded">person</span> Alex</span>
    <span class="lp-chip"><span class="material-symbols-rounded">label</span> Design</span>
    <span class="lp-chip"><span class="material-symbols-rounded">tag</span> Launchpad</span>
</div>

Icons in Alerts

Lead an alert with a status icon. Alerts style icons automatically — no helper needed.

check_circle

Saved. Your changes were published.

warning

Heads up. This will affect billing next cycle.

error

Something went wrong. Please try again.

info

Tip. You can drag rows to reorder.

<p class="lp-text-sm lp-text-muted lp-mb-3">Lead an alert with a status icon. Alerts style icons automatically — no helper needed.</p>
<div class="lp-alert lp-alert-success lp-mb-2">
    <span class="material-symbols-rounded">check_circle</span>
    <div><strong>Saved.</strong> Your changes were published.</div>
</div>
<div class="lp-alert lp-alert-warning lp-mb-2">
    <span class="material-symbols-rounded">warning</span>
    <div><strong>Heads up.</strong> This will affect billing next cycle.</div>
</div>
<div class="lp-alert lp-alert-danger lp-mb-2">
    <span class="material-symbols-rounded">error</span>
    <div><strong>Something went wrong.</strong> Please try again.</div>
</div>
<div class="lp-alert lp-alert-info">
    <span class="material-symbols-rounded">info</span>
    <div><strong>Tip.</strong> You can drag rows to reorder.</div>
</div>

Icons in Links & Breadcrumbs

Same rule as inline text — use .lp-icon-inline when the icon sits next to anchor text.

open_in_new Open external link · download Download report · delete Remove

<p class="lp-text-sm lp-text-muted lp-mb-3">Same rule as inline text — use <code class="lp-code">.lp-icon-inline</code> when the icon sits next to anchor text.</p>
<p class="lp-mb-3">
    <a href="#" class="lp-text-primary"><span class="material-symbols-rounded lp-icon-inline">open_in_new</span> Open external link</a>
    &nbsp;&middot;&nbsp;
    <a href="#" class="lp-text-primary"><span class="material-symbols-rounded lp-icon-inline">download</span> Download report</a>
    &nbsp;&middot;&nbsp;
    <a href="#" class="lp-text-danger"><span class="material-symbols-rounded lp-icon-inline">delete</span> Remove</a>
</p>
<nav aria-label="breadcrumb">
    <ol class="lp-breadcrumb">
        <li class="lp-breadcrumb-item"><a href="#"><span class="material-symbols-rounded lp-icon-inline">home</span> Home</a></li>
        <li class="lp-breadcrumb-item"><a href="#">Library</a></li>
        <li class="lp-breadcrumb-item lp-active" aria-current="page">Icons</li>
    </ol>
</nav>

When to use which size helper

Context	Size helper?	Why
Inside `.lp-btn` (any size)	No	Button auto-sizes icons per `lp-btn-{xs,sm,lg,xl}`.
Inside `.lp-badge` / `.lp-pill` / `.lp-chip`	No	The component's own `font-size` cascades to the icon.
Inside `.lp-alert`	No	Alert styles the leading icon automatically.
Inline with paragraph / heading text	Use `.lp-icon-inline`	Sets 1.125rem + baseline nudge so the icon aligns with text.
Standalone icon (not in any component)	Yes — `xs/sm/md/lg`	No parent sets the size, so pick one explicitly.
One-off custom size	Inline style	`style="font-size: 2rem"` is fine for a demo/unique case.