Launchpad Icons

<i class="li-dbo"></i>

Install

Two font weights ship as WOFF2 — regular (400) and lighter (100) — sharing one character map. You only ever link one stylesheet. The package ships compiled CSS + fonts only — no source.

npm — install the scoped package:

npm install @dboio/launchpad-icons

import '@dboio/launchpad-icons'        // launchpad-icons.css
import '@dboio/launchpad-icons/min'    // minified

CDN (jsDelivr) — no build step, pin a version (or @latest):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dboio/launchpad-icons@latest/dist/assets/css/launchpad-icons.min.css">

Vendor — or copy dist/assets/ into your project and link the stylesheet, keeping the two .woff2 files at the ../fonts path the CSS expects:

<link rel="stylesheet" href="/assets/css/launchpad-icons.min.css">

Then use any class:

<i class="li-dbo"></i>

Icons

Every class in the font. Search by name or keyword, then click any icon to copy its class — or Alt-click to copy the full <i> element.

Builder

Toggle conditional classes, search for an icon, and copy the generated snippet. Live preview updates as you change options.

Click an icon above to generate its snippet.

Sizing

By default an icon inherits its size from the surrounding font-size. Override it with any of these:

• .li-sm — renders smaller than the inherited size. In combination with a styling class (.li-disc, .li-circle, …) the inner graphic is scaled back further inside its shape.
• .li-lg — renders 1.333× the inherited size. (Note: this is not the same as .li-1x — it sits between 1× and 2×.)
• .li-1x … .li-10x — multiply the icon’s natural size by N. .li-2x is twice the surrounding size, .li-3x three times, up to .li-10x at ten times. The scale tracks the text the icon sits in (and the .os-unit value when one is set).

<i class="li-star li-sm"></i>
<i class="li-star"></i>
<i class="li-star li-lg"></i>
<i class="li-star li-2x"></i>
<i class="li-star li-3x"></i>

os-unit

.os-unit pins an icon to a fixed pixel box instead of letting it scale with the surrounding font-size. This is how LaunchpadOS keeps icon controls uniform across a UI regardless of nearby text — and it’s the natural size for disc/rounded backings, badges, and spinners, which all scale within the unit.

The box comes from the --os-unit CSS variable (default 3rem, i.e. 48px). Apply it two ways:

• on the icon — <i class="li-app li-disc os-unit"></i>
• on a wrapper — every li-* inside an .os-unit element inherits the unit.

Resize by setting --os-unit inline (or on a container):

<i class="li-app li-disc os-unit"></i>                          <!-- 48px default -->
<i class="li-app li-disc os-unit" style="--os-unit: 72px"></i>  <!-- resized -->

<!-- or size a whole group from a wrapper -->
<div class="os-unit" style="--os-unit: 32px">
  <i class="li-app li-disc"></i>
  <i class="li-bell li-disc"></i>
</div>

The Builder lets you change --os-unit live and see icons respond.

Styling

• .li-circle — outlines the icon with a circle and scales the graphic down to 60%.
• .li-disc — underlays a solid disc, scales the graphic to 60%, and inverts the icon color on top of the disc color.
• .li-ellipse — clips (masks) the icon in a circular shape. Apply a background-color and the icon color inverts against it. When the SASS variable $selected-support is true, this class is named .li-rounded instead.
• .li-rounded — underlays a solid rounded box, scales the graphic to 60%, and inverts the icon color on top. When $selected-support is true, this class is named .li-box.
• .li-border — outlines the icon with a border. Combinable with any other style.
• .li-flip-horizontal, .li-flip-vertical — flip the icon on either axis.
• .li-rotate-90, .li-rotate-180, .li-rotate-270 — rotate the icon. Has no effect while .li-spin or .li-spin-counter is applied.

<i class="li-star li-circle"></i>
<i class="li-star li-disc"></i>
<i class="li-star li-ellipse" style="background: cornflowerblue"></i>
<i class="li-star li-rounded"></i>
<i class="li-star li-border"></i>
<i class="li-arrow-e li-flip-horizontal"></i>
<i class="li-arrow-e li-rotate-90"></i>

Font weight

Two faces are bound: regular (the default) and lighter (100). Trigger the lighter face with font-weight: lighter, or the class .li-light / .li-lighter.

The class hooks for a bold face (.li-bold, .li-bolder, nesting inside <strong> / <b>) exist in the CSS, but no bold font file is shipped yet — they’re wired ahead of a future bold weight and currently fall back to regular.

<i class="li-media"></i>
<i class="li-media li-light"></i>

Animation

• .li-spin — spins the icon graphic clockwise.
• .li-spin-counter — spins it counter-clockwise.
• .loading — slightly modifies and pulsates the two dots of .li-options and .li-options-horizontal.

<i class="li-refresh li-spin"></i>
<i class="li-refresh li-spin-counter"></i>
<i class="li-options-horizontal loading"></i>

Morph

Six icons can animate dynamically into each other. Apply li-morph plus the specific morph class. Combining a morph with li-circle or li-disc is not supported — use li-rounded or li-ellipse when you need a disc-type background.

• .li-morph-plus
• .li-morph-minus
• .li-morph-edit
• .li-morph-view
• .li-morph-close
• .li-morph-equal

<i class="os-unit li-rounded color-bg-canvas color-fg-widget li-morph li-morph-close"></i>

Animate by swapping the class with JavaScript:

let animateIcon = function(icon) {
  icon.classList.replace('li-morph-close', 'li-morph-view');
  icon.classList.replace('color-fg-widget', 'color-fg-view');
  setTimeout(() => {
    icon.classList.replace('li-morph-view', 'li-morph-minus');
    icon.classList.replace('color-fg-view', 'color-fg-delete');
    setTimeout(() => {
      icon.classList.replace('li-morph-minus', 'li-morph-edit');
      icon.classList.replace('color-fg-delete', 'color-fg-edit');
      setTimeout(() => {
        icon.classList.replace('li-morph-edit', 'li-morph-plus');
        icon.classList.replace('color-fg-edit', 'color-fg-add');
        setTimeout(() => {
          icon.classList.replace('li-morph-plus', 'li-morph-equal');
          icon.classList.replace('color-fg-add', 'color-fg-view');
          setTimeout(() => {
            icon.classList.replace('li-morph-equal', 'li-morph-close');
            icon.classList.replace('color-fg-view', 'color-fg-widget');
          }, 1500)
        }, 1500)
      }, 1500)
    }, 1500)
  }, 1500)
}

Overrides

Overrides swap the icon graphic when a condition is met — useful for on / off visualization. The samples below are live — click to toggle.

<label><input type="checkbox" hidden><i class="li-off"></i></label>
<label><input type="checkbox" hidden><i class="li-checkbox"></i></label>
<label><input type="radio" hidden><i class="li-radiobutton"></i></label>
<label><input type="checkbox" hidden><i class="li-lock"></i></label>

• .fullscreen and :fullscreen — swap .li-expand for .li-contract.

• li-checkbox, .li-radiobutton, .li-on, .li-off, .li-off-alt, .li-lock, .li-unlock — react to a preceding checkbox / radio input inside a <label>, or a checked <input>.

  <label><input type="checkbox" hidden><i class="li-on"></i></label>
  <label><input type="checkbox" hidden><i class="li-checkbox"></i></label>
  <label><input type="radio" hidden><i class="li-radiobutton"></i></label>
  <label><input type="checkbox" hidden><i class="li-lock"></i></label>
  

• When $selected-support is true (or the class .li-selected-support is on the icon), the class selected plus :active / :focus on the icon or a parent toggles the solid rendition, and the selected/checked state of li-off, li-checkbox, and li-radiobutton. The default is false, so only .selected directly on the icon switches it to solid; .selected on a parent and :active / :focus are ignored. Selected states for .li-radiobutton, .li-checkbox, and .li-off always respond to a parent .selected.

  <!-- all render the solid state of li-alert -->
  <span class="selected"><i class="li-alert"></i></span> <!-- only when $selected-support: true -->
  <i class="li-alert selected"></i>
  <i class="li-alert-solid"></i>
  
  <!-- selected state for controls -->
  <i class="li-checkbox selected"></i> <!-- renders li-checkbox-checked -->
  <i class="li-radiobutton selected"></i> <!-- renders li-radiobutton-checked -->
  <i class="li-off selected"></i> <!-- renders li-on -->
  

Badges

Overlay a badge — an icon or a bit of text — that floats above the icon. The default position is top-right; move it with tl, bl, or br for the other corners. In Launchpad, colors.css is supported for badge colors (the samples below use inline color instead). Add the badge as inner markup:

<i class="li-app li-disc color-bg-app">
  <div class="li-badge tl"><span class="li-close li-disc"></span></div>
</i>
<a class="li-app li-disc color-bg-app">
  <span class="li-badge color-bg-delete color-fg-white">
    <small>55</small>
  </span>
</a>

Spinners

Add a child element for loading indication. The default spinner simply rotates; you can also drive a progress indicator from a percentage. The class .loading on the outer icon reveals the spinner (hidden otherwise). Set its color with the --color-progress CSS variable. Adding li-lighter to the li-spinner thins the spinner stroke only — not the parent icon.

<!-- default spinner that just rotates -->
<i class="li-check li-disc loading" style="--color-progress: var(--color-edit)">
  <div class="li-spinner li-lighter"><svg class="circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="16"></circle></svg></div>
</i>

<!-- spinner with progress -->
<i class="li-check li-disc li-lighter loading" data-progress="50%">
  <div class="li-spinner"><svg class="circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="16"></circle></svg></div>
</i>

Stacking & sandwiching

Sandwich multiple icons by nesting them. Use nestable elements — you can’t put an <i> inside an <i>, so reach for <span>.

<span class="li-circle-thick color-fg-info">
  <span class="li-users color-fg-delete"></span>
</span>