Icons

Klean Icons is a focused family of 98 original SVGs drawn from the actions and objects that repeat across Slipway and Hagfish. Every mark uses the same 24px canvas, calm 1.5px stroke, rounded joins, and optical rhythm.

There is no icon font, runtime package, provider, icon registry in the browser, size prop, color prop, or variant API. Install only the source you use. Then style ordinary SVG with Tailwind or native attributes.

Icon catalog

Search by name or intent, then copy exactly the source your app needs.

Search iconsSize

32px

Color

98 icons

• Trash

  A waste bin for destructive removal actions.
• Search

  A magnifying glass for search and discovery.
• Calendar

  A calendar page for dates and schedules.
• CheckCircle

  A checked circle for successful or completed status.
• X

  A crossing mark for close, clear, or cancel actions.
• ChevronRight

  A right-facing chevron for forward navigation.
• Copy

  Two overlapping sheets for copying content.
• User

  A person for accounts, profiles, and ownership.
• Folder

  A tabbed folder for projects and grouped files.
• Server

  A stacked server for infrastructure and deployments.
• Bell

  A bell for notifications and updates.
• Rocket

  Klean's balanced launch mark for deploy and release actions.
• ArrowRight

  A right-pointing arrow for forward movement and navigation.
• ChartBar

  Three measured bars for analytics and performance.
• Check

  A simple check mark for confirmation and selection.
• ChevronDown

  A downward chevron for disclosure and selection.
• ChevronLeft

  A left-facing chevron for previous navigation.
• Clock

  A clock face for time, duration, and schedules.
• DocumentText

  A folded document with text lines.
• Download

  A downward transfer arrow landing in a tray.
• Edit

  A precise pencil for editing content.
• EllipsisHorizontal

  Three horizontal dots for more actions.
• EllipsisVertical

  Three vertical dots for more actions.
• Envelope

  A closed envelope for email and messages.
• ExternalLink

  An arrow leaving a frame for external destinations.
• Eye

  An open eye for visibility and preview.
• EyeOff

  A crossed eye for hidden or private content.
• Globe

  A globe for public, international, and web contexts.
• History

  A returning clock for history and recent activity.
• Image

  A framed landscape for images and media.
• InfoCircle

  An information mark inside a circle.
• Key

  A key for credentials and access.
• Link

  Two joined links for URLs and relationships.
• Lock

  A closed padlock for security and private state.
• Menu

  Three balanced lines for application navigation.
• Plus

  A plus mark for adding and creating.
• Refresh

  Two returning arcs for refresh and retry.
• Settings

  A compact gear for settings and configuration.
• Share

  Three connected nodes for sharing content.
• ShieldCheck

  A checked shield for verified protection.
• SignOut

  An exit arrow leaving a doorway.
• Users

  Two people for teams and shared ownership.
• WarningTriangle

  A warning mark inside a balanced triangle.
• ArrowLeft

  A left-pointing arrow for return and backward movement.
• Ban

  A barred circle for prohibited and unavailable actions.
• Calculator

  A calculator for totals, pricing, and arithmetic.
• CalendarX

  A calendar page marked unavailable.
• Camera

  A camera for capturing and attaching photographs.
• Cash

  A banknote for cash and monetary amounts.
• Chat

  A rounded conversation bubble for chat.
• Comment

  A compact comment card with text lines.
• CreditCard

  A payment card for billing and checkout.
• CurrencyDollar

  A dollar mark in a circle for currency values.
• Document

  A simple folded document for files and records.
• EnvelopeOpen

  An open envelope for received and read messages.
• Expand

  Four outward corners for expanding a view.
• FilePdf

  A folded document with an archival PDF mark.
• Fingerprint

  Layered fingerprint ridges for identity verification.
• MapPin

  A location pin for places and addresses.
• Newspaper

  A newspaper layout for editorial content and updates.
• Recurring

  Two circular arrows for recurring activity.
• Send

  A folded paper plane for sending content.
• StopCircle

  A stop square inside a circle for terminating activity.
• Swap

  Opposing horizontal arrows for exchanging values.
• Ticket

  A perforated ticket for credits and admissions.
• UserPlus

  A person with a plus mark for invitations.
• Wallet

  A wallet for balances and stored payment methods.
• XCircle

  A crossing mark inside a circle for failure and removal.
• ArrowDown

  A downward arrow for movement and descending actions.
• ArrowUp

  An upward arrow for movement and ascending actions.
• Bolt

  A sharp energy bolt for fast and powered actions.
• BookOpen

  An open book for documentation and guides.
• Bookmark

  A bookmark ribbon for saved items.
• Building

  A compact office building for organizations.
• ChevronUp

  An upward chevron for collapse and ascending selection.
• CloudUpload

  A cloud receiving an upload arrow.
• Code

  Angle brackets for code and source.
• Cube

  An isometric cube for packages and services.
• Database

  A stacked database cylinder for persistent data.
• DocumentAdd

  A folded document with a plus mark.
• Filter

  A narrowing funnel for filtering data.
• Heart

  A heart for favorites and care.
• LayoutDashboard

  An asymmetric panel grid for dashboards.
• ListTree

  A branching list for hierarchy and nested resources.
• Pause

  Two vertical bars for pausing activity.
• Pin

  A pushpin for keeping important resources in reach.
• Play

  A right-pointing play triangle for starting activity.
• SidebarClose

  A sidebar frame with an inward closing cue.
• SidebarOpen

  A sidebar frame with an outward opening cue.
• Sort

  Opposing vertical arrows for sorting order.
• StatusOnline

  Concentric signal rings for online status.
• Stop

  A compact stop square for terminating activity.
• TableCells

  A structured grid of table cells.
• Tag

  A price tag for labels and metadata.
• Terminal

  A command prompt inside a terminal frame.
• Upload

  An upward transfer arrow leaving a tray.
• WrapText

  Text lines with a returning wrap arrow.
• Wrench

  An angled wrench for tools and maintenance.

Search is reflected in the page URL, so a filtered catalog can be reloaded, bookmarked, and shared. Framework choice is remembered across the Klean docs.

Installation

Install one icon by its lowercase name. The CLI detects Vue, React, or Svelte and writes the matching source into the conventional icons directory:

Run one command from a Boring Stack application. Klean detects the framework and conventional destination, then adds the framework-native source and its direct dependencies.

Terminal

npx klean-ui add icon trash

Terminal

pnpm dlx klean-ui add icon trash

Terminal

yarn dlx klean-ui add icon trash

Terminal

bunx klean-ui add icon trash

• No initializer or configuration file
• No framework, alias, or theme questions
• No Klean runtime dependency

Install several icons in one command when a screen needs a set:

Terminal

npx klean-ui add icon trash search calendar

Re-running add preserves changed local source. Use klean-ui check icon trash, diff icon trash, or update icon trash when you deliberately review upstream changes.

Usage

The component is decorative by default. Put its meaning in visible button or link text, or in the accessible name of the semantic parent control.

DeleteInvoice.vue

<script setup>
import Trash from '@/components/ui/icons/Trash.vue'
</script>

<template>
  <button
    type="button"
    class="inline-flex items-center gap-2 rounded-lg bg-red-600 px-3 py-2 text-sm font-semibold text-white"
    aria-label="Delete invoice"
  >
    <Trash class="size-4" />
    Delete
  </button>
</template>

DeleteInvoice.jsx

import Trash from '@/components/ui/icons/Trash.jsx'

export default function DeleteInvoice() {
  return (
    <button
      type="button"
      className="inline-flex items-center gap-2 rounded-lg bg-red-600 px-3 py-2 text-sm font-semibold text-white"
      aria-label="Delete invoice"
    >
      <Trash className="size-4" />
      Delete
    </button>
  )
}

DeleteInvoice.svelte

<script>
  import Trash from '$lib/components/ui/icons/Trash.svelte'
</script>

<button
  type="button"
  class="inline-flex items-center gap-2 rounded-lg bg-red-600 px-3 py-2 text-sm font-semibold text-white"
  aria-label="Delete invoice"
>
  <Trash class="size-4" />
  Delete
</button>

Styling

Icons use 1em for width and height and currentColor for stroke. Text size and color utilities therefore work without a Klean-specific API:

<Search class="size-5 text-blue-600" />
<Bell class="size-4 text-gray-500" stroke-width="1.75" />
<Rocket class="size-8 text-orange-500" />

Use size-*, text-*, opacity, responsive, state, and dark-mode utilities directly. Native SVG attributes such as stroke-width, aria-label, and role are forwarded by every framework component.

Do not make every icon louder to create hierarchy. Start with one color and one stroke weight. Let placement, visible text, and the parent control carry most of the meaning.

API

Input	Default	Purpose
class / className	—	Ordinary Tailwind sizing, color, opacity, state, responsive, and dark-mode utilities.
stroke-width / strokeWidth	1.5	Native SVG stroke override for a deliberate product treatment.
other SVG attributes	native	IDs, data hooks, event handlers, roles, labels, and other framework-native SVG inputs.
element reference	—	Framework-native access to the SVG element when genuinely needed.
accessible presentation	decorative	Hidden from assistive technology by default; override only for a truly informative mark.

There is no size, color, tone, variant, label, title, spin, filled, or as prop. CSS and SVG already provide those capabilities without another naming layer.

Accessibility

Prefer visible text. In a button that says “Delete”, Trash is decorative and should stay hidden from assistive technology. For an icon-only control, name the button—not the SVG:

<button type="button" aria-label="Delete invoice">
  <Trash class="size-5" />
</button>

Only make the SVG itself informative when it stands alone and no semantic parent can own its name:

<CheckCircle
  class="size-5 text-emerald-600"
  role="img"
  aria-hidden="false"
  aria-label="Payment complete"
/>

• Never rely on the icon alone when a destructive, irreversible, unfamiliar, or status-changing action needs text.
• Keep touch and pointer targets on the parent Button or link at least 44px; enlarging the SVG does not enlarge the target.
• Do not encode status with color alone. Pair the mark with useful text.
• Avoid redundant names such as a labeled button containing a separately labeled icon.
• Icons are not focusable. Keyboard focus belongs to the control that owns the action.

Why source-owned icons

An icon is interface source, not an opaque service. Installing the exact Vue, React, or Svelte component means an application can inspect it, change geometry when its product genuinely needs to, and keep rendering without a Klean runtime.

The shared 24px geometry keeps Slipway and Hagfish recognizable as part of the same ecosystem. currentColor, native attributes, and caller-owned classes let each product retain its own density, palette, contrast, and motion without forking an icon library API.

Updates are deliberate. Klean never silently replaces local geometry. The CLI shows whether an installed icon differs, and the application chooses when to inspect and accept a new source version.

Naming

Use the concrete object or action: Trash, Search, Calendar, Copy. Do not encode placement, product, color, or size into the exported name. The same Bell can appear in a header, notification preference, or activity feed without becoming three components.

The CLI uses lowercase kebab-case names while framework exports use PascalCase:

npx klean-ui add icon check-circle chevron-right

import CheckCircle from '@/components/ui/icons/CheckCircle.vue'
import ChevronRight from '@/components/ui/icons/ChevronRight.vue'

When to use

Use Klean Icons for repeated application actions, navigation, statuses, dates, identity, infrastructure, notifications, and deployment language. Use the shared source when consistency is more valuable than a product-specific illustration.

When not to use

• Use text without an icon when the mark adds no recognition or scanning value.
• Use a logo or product mark for brand identity; do not force a general interface icon to become one.
• Use an illustration for editorial, empty-state, onboarding, or marketing storytelling.
• Use Spinner for indeterminate progress and Avatar for resilient identity images.
• Keep highly specialized domain glyphs in the application until repeated use proves that they belong in the shared family.

Related components

• Button — owns action semantics, target size, pending state, and accessible naming around an icon.
• Menu, Command, and Tabs — compose icons with truthful actions, destinations, and navigation.
• Tooltip — adds brief supplementary text to a real icon-only control; it does not replace the control's accessible name.
• Badge, Alert, and Toast — pair status marks with visible language and truthful announcement behavior.
• Avatar, Spinner, and Empty State — cover nearby visual roles that should not be folded into the icon contract.