icons

55 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 name to copy the import.

Navigation & Direction

iconArrowLeft

iconArrowRight

iconArrowUp

iconArrowDown

iconChevronLeft

iconChevronRight

iconChevronUp

iconChevronDown

iconExternalLink

iconMenu

iconX

iconMoreHorizontal

iconMoreVertical

Status

iconCheck

iconCheckCircle

iconXCircle

iconAlertCircle

iconAlertTriangle

iconInfo

Actions

iconPlus

iconMinus

iconEdit

iconTrash

iconCopy

iconSearch

iconFilter

iconDownload

iconUpload

iconRefresh

iconSend

UI Controls

iconEye

iconEyeOff

iconLock

iconUnlock

iconSettings

iconBell

People & Communication

iconUser

iconUsers

iconMail

iconMessageSquare

Navigation & Pages

iconHome

iconMapPin

iconLogOut

iconLogIn

Content & Files

iconFile

iconImage

iconLink

iconCode

iconCalendar

iconClock

iconBookmark

iconTag

Media & Rating

iconPlay

iconPause

iconVolume

iconStar

iconHeart

Devices

iconPhone

iconGamepad

Hand Pointers

iconHandPointUp

iconHandPointDown

iconHandPointLeft

iconHandPointRight

Misc

iconGlobe

iconShield

iconZap

iconTrendingUp

iconTrendingDown

iconLoader

iconGrid

iconBug

Theme

iconSun

iconMoon

Prop	Type	Default
`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'