Icons — Interplanetary UI

Usage

Icons are embedded as inline SVGs for maximum flexibility. Wrap them in .ip-icon for consistent sizing and alignment.

Sun icon with .ip-icon wrapper

Code

<span class="ip-icon ip-icon-md">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">...</svg>
</span>

Sizes

Icon size modifiers for consistent scaling.

xs (12px)

sm (14px)

md (16px)

lg (20px)

xl (24px)

Code

<span class="ip-icon ip-icon-xs">...</span>  <!-- 12px -->
<span class="ip-icon ip-icon-sm">...</span>  <!-- 14px -->
<span class="ip-icon ip-icon-md">...</span>  <!-- 16px -->
<span class="ip-icon ip-icon-lg">...</span>  <!-- 20px -->
<span class="ip-icon ip-icon-xl">...</span>  <!-- 24px -->

Colors

Icons inherit text color by default. Use modifiers for semantic colors.

inherit

accent

muted

success

error

warning

info

Code

<span class="ip-icon ip-icon-accent">...</span>
<span class="ip-icon ip-icon-muted">...</span>
<span class="ip-icon ip-icon-success">...</span>
<span class="ip-icon ip-icon-error">...</span>
<span class="ip-icon ip-icon-warning">...</span>
<span class="ip-icon ip-icon-info">...</span>

Core Icons

Essential icons used throughout Interplanetary UI components.

Sun

Moon

Plus

Minus

X

Copy

List

Caret Down

Caret Up

Caret Right

Caret Left

Arrow Up Right

Info

Warning

Check Circle

X Circle

Check

Check Bold

Circle Dashed

With Text

Use .ip-icon-left or .ip-icon-right for proper spacing when placing icons alongside text.

View documentation

Code

<button class="ip-btn-primary">
  <span class="ip-icon ip-icon-sm ip-icon-left">
    <svg>...</svg>
  </span>
  Add Item
</button>

<button class="ip-btn">
  Learn More
  <span class="ip-icon ip-icon-sm ip-icon-right">
    <svg>...</svg>
  </span>
</button>

Icon Reference

Browse the full Phosphor icon library at phosphoricons.com. Copy the SVG code and paste it directly into your HTML.

Use the "Regular" weight icons for consistency. Set width/height to match your target size (12, 14, 16, 20, or 24px).