icons

100 curated icons. All are pure functions returning an SVG string — no external library, no DOM dependency, tree-shakeable. Style: 24×24 viewBox, stroke="currentColor", compatible with any colour token.

Usage

Import the icon functions you need alongside other components. Call each as a function — optionally pass size and class.

import { iconCheck, iconSearch, iconUser } from '@invisibleloop/pulse/ui'

// Default size (16px)
iconCheck()

// Custom size
iconSearch({ size: 20 })

// With extra class
iconUser({ size: 20, class: 'u-text-accent' })

With button

Pass an icon into the icon prop of button().

button({ label: 'Download', variant: 'primary',   icon: iconDownload({ size: 14 }) })
button({ label: 'Edit',     variant: 'secondary', icon: iconEdit({ size: 14 }) })
button({ label: 'Delete',   variant: 'danger',    icon: iconTrash({ size: 14 }) })
button({ label: 'Search',   variant: 'ghost',     icon: iconSearch({ size: 14 }) })

With feature

Icons compose naturally into the feature() icon slot.

Fast

Streaming SSR. No build step.

Secure

Security headers on every response.

Simple

Plain JS objects, no JSX.

feature({ icon: iconZap({ size: 20 }),    title: 'Fast',   description: '...' })
feature({ icon: iconShield({ size: 20 }), title: 'Secure', description: '...' })
feature({ icon: iconCode({ size: 20 }),   title: 'Simple', description: '...' })

Background

Add bg: 'circle' or bg: 'square' to wrap the icon in a tinted background. Use bgColor to pick the colour — defaults to 'accent'.

Circle

iconZap({          size: 20, bg: 'circle', bgColor: 'accent'  })
iconCheck({        size: 20, bg: 'circle', bgColor: 'success' })
iconAlertTriangle({ size: 20, bg: 'circle', bgColor: 'warning' })
iconXCircle({      size: 20, bg: 'circle', bgColor: 'error'   })
iconSettings({     size: 20, bg: 'circle', bgColor: 'muted'   })

Square (rounded)

iconZap({ size: 20, bg: 'square', bgColor: 'accent' })

With feature()

Pairs naturally with the feature() icon slot at larger sizes.

Fast

Streaming SSR, zero config.

Secure

Security headers by default.

Simple

Plain JS objects, no JSX.

feature({ icon: iconZap({    size: 22, bg: 'square', bgColor: 'accent'  }), title: 'Fast',   description: '...' })
feature({ icon: iconShield({ size: 22, bg: 'square', bgColor: 'success' }), title: 'Secure', description: '...' })
feature({ icon: iconCode({   size: 22, bg: 'square', bgColor: 'muted'   }), title: 'Simple', description: '...' })

Colour

Icons inherit color from their parent — use utility classes or CSS tokens to tint them.

<span class="u-text-accent">${iconStar({ size: 20 })}</span>
<span class="u-text-green">${iconCheckCircle({ size: 20 })}</span>
<span class="u-text-red">${iconXCircle({ size: 20 })}</span>
<span class="u-text-yellow">${iconAlertTriangle({ size: 20 })}</span>

All icons

Click any icon to preview sizes, colours, and backgrounds.

Navigation & Direction

Status

AI & Data

Astronomy

Actions

UI Controls

People & Communication

Navigation & Pages

Content & Files

Media & Rating

Devices

Hand Pointers

Misc

Theme

Ecommerce

Food & Drink

Prop	Type	Default	Description
`size`	number	16	Width and height in px
`class`	string	—	Extra CSS classes (on wrapper when `bg` is set, otherwise on the SVG)
`bg`	string	—	'circle' · 'square' — wraps the icon in a tinted background
`bgColor`	string	'accent'	'accent' · 'success' · 'warning' · 'error' · 'muted'

SVG paths derived from Lucide (ISC License, Copyright © 2022 Lucide Contributors) and Feather Icons (MIT License, Copyright © 2013–2017 Cole Bemis). Phosphor hand-pointer icons MIT License, Copyright © 2020 Phosphor Icons.