Skip to main content

Icon

Icon

A unified icon component with 50+ commonly used icons

Tags: component core icon

View Demo

Icon is a component that provides a unified interface for rendering SVG icons. It includes 50+ commonly used icons with consistent styling and accessibility support.

Import​

<script>
  import { Icon } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<Icon name="check" />
<Icon name="close" />
<Icon name="edit" />

Props​

Prop Type Default Description
name IconName required Name of the icon to display (required)
size number 24 Size of the icon in pixels
strokeWidth number 2 Stroke width for stroke-based icons
label string - Accessible label (renders as visually hidden text)
class string - Additional CSS classes

Available Icons​

<Icon name="close" />
<!-- X mark -->
<Icon name="check" />
<!-- Checkmark -->
<Icon name="plus" />
<!-- Plus sign -->
<Icon name="minus" />
<!-- Minus sign -->
<Icon name="menu" />
<!-- Hamburger menu -->
<Icon name="search" />
<!-- Magnifying glass -->
<Icon name="home" />
<!-- House -->
<Icon name="settings" />
<!-- Gear -->
<Icon name="refresh" />
<!-- Refresh arrows -->

Arrows & Chevrons​

<Icon name="chevron-down" />
<Icon name="chevron-up" />
<Icon name="chevron-left" />
<Icon name="chevron-right" />
<Icon name="arrow-left" />
<Icon name="arrow-right" />
<Icon name="external-link" />

Editing & Files​

<Icon name="edit" />
<!-- Pencil -->
<Icon name="trash" />
<!-- Trash can -->
<Icon name="copy" />
<!-- Copy documents -->
<Icon name="download" />
<!-- Download arrow -->
<Icon name="upload" />
<!-- Upload arrow -->
<Icon name="file" />
<!-- Document -->
<Icon name="folder" />
<!-- Folder -->
<Icon name="image" />
<!-- Image placeholder -->

Feedback & Status​

<Icon name="info" />
<!-- Info circle -->
<Icon name="alert-circle" />
<!-- Alert circle -->
<Icon name="alert-triangle" />
<!-- Warning triangle -->
<Icon name="loading" />
<!-- Animated spinner -->

Communication​

<Icon name="message" />
<!-- Speech bubble -->
<Icon name="chat" />
<!-- Simple chat bubble -->
<Icon name="mail" />
<!-- Envelope -->
<Icon name="phone" />
<!-- Phone -->
<Icon name="send" />
<!-- Paper plane -->

User & Security​

<Icon name="user" />
<!-- User silhouette -->
<Icon name="lock" />
<!-- Locked padlock -->
<Icon name="unlock" />
<!-- Unlocked padlock -->
<Icon name="eye" />
<!-- Visible eye -->
<Icon name="eye-off" />
<!-- Hidden eye -->

UI & Interaction​

<Icon name="more" />
<!-- Vertical dots -->
<Icon name="more-horizontal" />
<!-- Horizontal dots -->
<Icon name="grip" />
<!-- Drag handle (6 dots) -->
<Icon name="filter" />
<!-- Filter funnel -->
<Icon name="sort" />
<!-- Sort arrows -->
<Icon name="link" />
<!-- Chain link -->

Time & Date​

<Icon name="calendar" />
<!-- Calendar -->
<Icon name="clock" />
<!-- Clock face -->
<Icon name="history" />
<!-- Clock with history -->

Social & Favorites​

<Icon name="star" />
<!-- Star -->
<Icon name="heart" />
<!-- Heart -->
<Icon name="bookmark" />
<!-- Bookmark -->

Sizes​

The default size is 24px. Use the size prop to customize:

<Icon name="check" size={16} />
<!-- Small -->
<Icon name="check" size={24} />
<!-- Default -->
<Icon name="check" size={32} />
<!-- Large -->
<Icon name="check" size={48} />
<!-- Extra large -->

Stroke Width​

Adjust the stroke width for stroke-based icons:

<Icon name="check" strokeWidth={1} />
<!-- Thin -->
<Icon name="check" strokeWidth={2} />
<!-- Default -->
<Icon name="check" strokeWidth={3} />
<!-- Bold -->

Color​

Icons inherit the current text color. Use Tailwind classes to customize:

<Icon name="check" class="text-green-500" />
<Icon name="close" class="text-red-500" />
<Icon name="info" class="text-blue-500" />
<Icon name="alert-triangle" class="text-yellow-500" />
<Icon name="edit" class="text-muted-foreground" />

Accessibility​

For icons that convey meaning (not purely decorative), use the label prop:

<Icon name="check" label="Success" />
<Icon name="alert-circle" label="Warning: Action required" />
<button>
  <Icon name="trash" label="Delete item" />
</button>

When an icon is purely decorative (meaning is conveyed by surrounding text), omit the label:

<button>
  <Icon name="edit" /> Edit Profile
</button>

TypeScript​

The IconName type is exported for TypeScript users:

import { Icon, type IconName } from '@classic-homes/theme-svelte';

let iconName: IconName = 'check';

Examples​

Icon Buttons​

<button class="p-2 rounded-md hover:bg-muted">
  <Icon name="close" size={20} label="Close dialog" />
</button>

<button class="p-2 rounded-md hover:bg-muted">
  <Icon name="settings" size={20} label="Open settings" />
</button>

Button with Icon​

<Button>
  <Icon name="plus" size={18} class="mr-2" />
  Add Item
</Button>

<Button variant="destructive">
  <Icon name="trash" size={18} class="mr-2" />
  Delete
</Button>

Status Indicators​

<div class="flex items-center gap-2">
  <Icon name="check" class="text-green-500" size={20} />
  <span>Completed</span>
</div>

<div class="flex items-center gap-2">
  <Icon name="alert-circle" class="text-yellow-500" size={20} />
  <span>Pending review</span>
</div>

<div class="flex items-center gap-2">
  <Icon name="close" class="text-red-500" size={20} />
  <span>Failed</span>
</div>

Loading State​

<Button disabled>
  <Icon name="loading" size={18} class="mr-2" />
  Saving...
</Button>
<nav class="space-y-1">
  <a href="/" class="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-muted">
    <Icon name="home" size={20} />
    Home
  </a>
  <a href="/settings" class="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-muted">
    <Icon name="settings" size={20} />
    Settings
  </a>
  <a href="/profile" class="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-muted">
    <Icon name="user" size={20} />
    Profile
  </a>
</nav>

Input with Icon​

<div class="relative">
  <Icon
    name="search"
    size={18}
    class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
  />
  <Input class="pl-10" placeholder="Search..." />
</div>

Password Toggle​

<script>
  let showPassword = $state(false);
</script>

<div class="relative">
  <Input type={showPassword ? 'text' : 'password'} />
  <button
    type="button"
    class="absolute right-3 top-1/2 -translate-y-1/2"
    onclick={() => (showPassword = !showPassword)}
  >
    <Icon
      name={showPassword ? 'eye-off' : 'eye'}
      size={18}
      label={showPassword ? 'Hide password' : 'Show password'}
    />
  </button>
</div>

Complete Icon List​

Name Description
close X mark for closing
check Checkmark for success
plus Plus sign for adding
minus Minus sign for removing
edit Pencil for editing
trash Trash can for deleting
info Information circle
alert-circle Alert/warning circle
alert-triangle Warning triangle
chevron-down Downward chevron
chevron-up Upward chevron
chevron-left Left chevron
chevron-right Right chevron
search Magnifying glass
settings Gear/cog
user User silhouette
home House
external-link Arrow pointing out
loading Animated spinner
send Paper plane
more Vertical ellipsis
more-horizontal Horizontal ellipsis
grip Drag handle (6 dots)
history Clock with history
message Speech bubble
chat Simple chat bubble
eye Visible eye
eye-off Hidden eye (crossed out)
copy Copy/duplicate
download Download arrow
upload Upload arrow
refresh Refresh/reload
arrow-left Left arrow
arrow-right Right arrow
menu Hamburger menu
filter Filter funnel
sort Sort arrows
calendar Calendar
clock Clock face
mail Envelope
phone Phone
link Chain link
image Image placeholder
file Document
folder Folder
star Star
heart Heart
bookmark Bookmark
lock Locked padlock
unlock Unlocked padlock
  • Button - Buttons often include icons
  • Spinner - Alternative loading indicator with more options
On this page