@jis3r/icons Documentation

Use icon components from @jis3r/icons

main

The @jis3r/icons package provides a collection of Svelte icon components. Each icon is exported as a named component from the main entrypoint. You can import any icon by its PascalCase name and use it directly within your Svelte application.

Common icon names include:

Navigation: ArrowUp, ChevronDown, MoveRight, Maximize
UI Elements: Settings, Search, Plus, Trash, Bell
Status/Alerts: AlertCircle, ShieldCheck, BatteryLow, Check
Media: Play, Volume2, Mic, Music

Note: Since these are Svelte components, they can be used in any Svelte project that has the package installed.

<script>
  import { Search, Settings, Bell } from '@jis3r/icons';
</script>

<Search />
<Settings />
<Bell />

Configure icon components with IconProps

main

Every icon component exported by @jis3r/icons accepts props defined by the IconProps type. Use these props to customize the appearance of the icon (such as size, color, or stroke width) according to the component's implementation.

Reference available IconName values

main

The IconName type is a union of strings representing the unique identifier for every icon available in the library. This is useful for programmatic icon selection or when working with components that accept an icon name as a prop.

type IconName = 
  | 'accessibility'
  | 'activity'
  | 'airplay'
  | 'alarm-clock-check'
  | 'alarm-clock-off'
  | 'alarm-clock'
  | 'align-horizontal-space-around'
  | 'align-vertical-space-around'
  | 'anvil'
  | 'archive'
  | 'arrow-big-down-dash'
  | 'arrow-big-down'
  | 'arrow-big-left-dash'
  | 'arrow-big-left'
  | 'arrow-big-right-dash'
  | 'arrow-big-right'
  | 'arrow-big-up-dash'
  | 'arrow-big-up'
  | 'arrow-down-0-1'
  | 'arrow-down-1-0'
  | 'arrow-down-a-z'
  | 'arrow-down-left'
  | 'arrow-down-right'
  | 'arrow-down-z-a'
  | 'arrow-down'
  | 'arrow-left-right'
  | 'arrow-left'
  | 'arrow-right-left'
  | 'arrow-right'
  | 'arrow-up-0-1'
  | 'arrow-up-1-0'
  | 'arrow-up-a-z'
  | 'arrow-up-left'
  | 'arrow-up-right'
  | 'arrow-up-z-a'
  | 'arrow-up'
  | 'audio-lines'
  | 'award'
  | 'axe'
  | 'axis-3d'
  | 'badge-alert'
  | 'badge-check'
  | 'badge-question-mark'
  | 'badge-x'
  | 'battery-charging'
  | 'battery-full'
  | 'battery-low'
  | 'battery-medium'
  | 'battery-warning'
  | 'battery'
  | 'bean-off'
  | 'beer-off'
  | 'bell-off'
  | 'bell-ring'
  | 'bell'
  | 'between-horizontal-end'
  | 'between-horizontal-start'
  | 'between-vertical-end'
  | 'between-vertical-start'
  | 'binary'
  | 'blend'
  | 'blocks'
  | 'bluetooth-off'
  | 'bold'
  | 'bolt'
  | 'bone'
  | 'book-a'
  | 'book-audio'
  | 'book-check'
  | 'book-dashed'
  | 'book-down'
  | 'book-headphones'
  | 'book-heart'
  | 'book-image'
  | 'book-key'
  | 'book-lock'
  | 'book-marked'
  | 'book-minus'
  | 'book-open-check'
  | 'book-open-text'
  | 'book-plus'
  | 'book-text'
  | 'book-type'
  | 'book-up-2'
  | 'book-up'
  | 'book-user'
  | 'book-x'
  | 'book'
  | 'bookmark-check'
  | 'bookmark-minus'
  | 'bookmark-plus'
  | 'bookmark-x'
  | 'bookmark'
  | 'bot-off'
  | 'bot'
  | 'boxes'
  | 'brain-cog'
  | 'briefcase-business'
  | 'briefcase-conveyor-belt'
  | 'briefcase-medical'
  | 'briefcase'
  | 'brush-cleaning'
  | 'brush'
  | 'bug-off'
  | 'calendar-check-2'
  | 'calendar-check'
  | 'calendar-cog'
  | 'calendar-days'
  | 'calendar-off'
  | 'calendar-sync'
  | 'calendar-x-2'
  | 'calendar-x'
  | 'camera-off'
  | 'candy-off'
  | 'captions-off'
  | 'cast'
  | 'cctv'
  | 'chart-bar-decreasing'
  | 'chart-bar-increasing'
  | 'chart-bar'
  | 'chart-column-decreasing'
  | 'chart-column-increasing'
  | 'chart-column'
  | 'chart-gantt'
  | 'chart-line'
  | 'chart-no-axes-column-decreasing'
  | 'chart-no-axes-column-increasing'
  | 'chart-no-axes-column'
  | 'chart-no-axes-combined'
  | 'chart-no-axes-gantt'
  | 'chart-pie'
  | 'chart-scatter'
  | 'chart-spline'
  | 'check-check'
  | 'check'
  | 'cherry'
  | 'chevron-down'
  | 'chevron-left'
  | 'chevron-right'
  | 'chevron-up'
  | 'chevrons-down-up'
  | 'chevrons-down'
  | 'chevrons-left-right'
  | 'chevrons-left'
  | 'chevrons-right-left'
  | 'chevrons-right'
  | 'chevrons-up-down'
  | 'chevrons-up'
  | 'cigarette-off'
  | 'circle-alert'
  | 'circle-arrow-down'
  | 'circle-arrow-left'
  | 'circle-arrow-out-down-left'
  | 'circle-arrow-out-down-right'
  | 'circle-arrow-out-up-left'
  | 'circle-arrow-out-up-right'
  | 'circle-arrow-right'
  | 'circle-arrow-up'
  | 'circle-check-big'
  | 'circle-check'
  | 'circle-chevron-down'
  | 'circle-chevron-left'
  | 'circle-chevron-right'
  | 'circle-chevron-up'
  | 'circle-off'
  | 'circle-parking-off'
  | 'circle-plus'
  | 'circle-question-mark'
  | 'circle-x'
  | 'clapperboard'
  | 'clipboard-check'
  | 'clipboard-list'
  | 'clipboard-pen-line'
  | 'clipboard-pen'
  | 'clipboard-x'
  | 'clipboard'
  | 'clock-1'
  | 'clock-10'
  | 'clock-11'
  | 'clock-12'
  | 'clock-2'
  | 'clock-3'
  | 'clock-4'
  | 'clock-5'
  | 'clock-6'
  | 'clock-7'
  | 'clock-8'
  | 'clock-9'
  | 'clock'
  | 'cloud-cog'
  | 'cloud-download'
  | 'cloud-moon'
  | 'cloud-off'
  | 'cloud-upload'
  | 'cog'
  | 'compass'
  | 'contrast'
  | 'copy-check'
  | 'copy'
  | 'cpu'
  | 'crop'
  | 'diamond-plus'
  | 'dice-1'
  | 'dice-2'
  | 'dice-3'
  | 'dice-4'
  | 'dice-5'
  | 'dice-6'
  | 'diff'
  | 'disc-3'
  | 'dna-off'
  | 'download'
  | 'droplet-off'
  | 'drum'
  | 'ear-off'
  | 'eclipse'
  | 'egg-off'
  | 'expand'
  | 'eye-off'
  | 'eye'
  | 'file-chart-column-increasing'
  | 'file-chart-column'
  | 'file-chart-line'
  | 'file-check-corner'
  | 'file-check'
  | 'file-cog'
  | 'file-down'
  | 'file-exclamation-point'
  | 'file-minus'
  | 'file-pen-line'
  | 'file-pen'
  | 'file-plus'
  | 'file-question-mark'
  | 'file-sliders'
  | 'file-stack'
  | 'file-terminal'
  | 'file-text'
  | 'file-up'
  | 'file-x-corner'
  | 'file-x'
  | 'fish-off'
  | 'flag-off'
  | 'flashlight-off'
  | 'flask-conical-off'
  | 'folder-check'
  | 'folder-cog'
  | 'folder-down'
  | 'folder-kanban'
  | 'folder-pen'
  | 'folder-plus'
  | 'folder-sync'
  | 'folder-up'
  | 'folder-x'
  | 'frame'
  | 'funnel-x'
  | 'gallery-horizontal-end'
  | 'gallery-horizontal'
  | 'gallery-thumbnails'
  | 'gallery-vertical-end'
  | 'gallery-vertical'
  | 'gauge'
  | 'gavel'
  | 'globe-x'
  | 'grid-2x2-check'
  | 'grip-horizontal'
  | 'grip-vertical'
  | 'grip'
  | 'hammer'
  | 'hand-coins'
  | 'hand-heart'
  | 'hard-drive-download'
  | 'hard-drive-upload'
  | 'headphone-off'
  | 'heart-off'
  | 'heart'
  | 'history'
  | 'hop-off'
  | 'house-wifi'
  | 'house'
  | 'image-down'
  | 'image-off'
  | 'image-up'
  | 'images'
  | 'infinity'
  | 'kanban'
  | 'key-round'
  | 'key-square'
  | 'key'
  | 'keyboard-off'
  | 'keyboard'
  | 'landmark'
  | 'layers'
  | 'layout-dashboard'
  | 'layout-grid'
  | 'layout-panel-left'
  | 'layout-panel-top'
  | 'layout-template'
  | 'lightbulb-off'
  | 'lightbulb'
  | 'link-2-off'
  | 'list-check'
  | 'list-checks'
  | 'list-restart'
  | 'list-todo'
  | 'loader-pinwheel'
  | 'locate-off'
  | 'log-in'
  | 'log-out'
  | 'mail-check'
  | 'mail-x'
  | 'map-pin-check-inside'
  | 'map-pin-check'
  | 'map-pin-off'
  | 'map-pin-x-inside'
  | 'map-pin-x'
  | 'maximize-2'
  | 'maximize'
  | 'megaphone-off'
  | 'message-circle-code'
  | 'message-circle-dashed'
  | 'message-circle-heart'
  | 'message-circle-more'
  | 'message-circle-off'
  | 'message-circle-question-mark'
  | 'message-circle-warning'
  | 'message-circle-x'
  | 'message-circle'
  | 'message-square-code'
  | 'message-square-dashed'
  | 'message-square-diff'
  | 'message-square-dot'
  | 'message-square-heart'
  | 'message-square-more'
  | 'message-square-off'
  | 'message-square-plus'
  | 'message-square-quote'
  | 'message-square-text'
  | 'message-square-warning'
  | 'message-square-x'
  | 'message-square'
  | 'mic-off'
  | 'milk-off'
  | 'minimize-2'
  | 'minimize'
  | 'minus'
  | 'monitor-check'
  | 'monitor-cog'
  | 'monitor-down'
  | 'monitor-off'
  | 'monitor-up'
  | 'monitor-x'
  | 'mouse-off'
  | 'mouse-pointer-2'
  | 'mouse-pointer'
  | 'move-diagonal-2'
  | 'move-diagonal'
  | 'move-down-left'
  | 'move-down-right'
  | 'move-down'
  | 'move-horizontal'
  | 'move-left'
  | 'move-right'
  | 'move-up-left'
  | 'move-up-right'
  | 'move-up'
  | 'move-vertical'
  | 'navigation-2-off'
  | 'navigation-off'
  | 'nfc'
  | 'notebook-pen'
  | 'nut-off'
  | 'octagon-alert'
  | 'octagon-x'
  | 'orbit'
  | 'package-check'
  | 'package-x'
  | 'paintbrush'
  | 'panel-bottom-close'
  | 'panel-bottom-open'
  | 'panel-bottom'
  | 'panel-left-close'
  | 'panel-left-open'
  | 'panel-left'
  | 'panel-right-close'
  | 'panel-right-open'
  | 'panel-right'
  | 'panel-top-close'
  | 'panel-top-open'
  | 'panel-top'
  | 'paperclip'
  | 'pen-line'
  | 'pen-off'
  | 'pen'
  | 'pencil-line'
  | 'pencil-off'
  | 'pencil'
  | 'phone-call'
  | 'phone-off'
  | 'pickaxe'
  | 'pin-off'
  | 'plane'
  | 'play'
  | 'plus'
  | 'pointer-off'
  | 'power-off'
  | 'printer-check'
  | 'rabbit'
  | 'radar'
  | 'radio-tower'
  | 'radio'
  | 'rainbow'
  | 'redo-dot'
  | 'redo'
  | 'refresh-ccw-dot'
  | 'refresh-ccw'
  | 'refresh-cw-off'
  | 'refresh-cw'
  | 'rocket'
  | 'rocking-chair'
  | 'rotate-ccw-key'
  | 'rotate-ccw'
  | 'rotate-cw'
  | 'route-off'
  | 'route'
  | 'rss'
  | 'satellite-dish'
  | 'save-off'
  | 'scan-text'
  | 'scissors'
  | 'search-check'
  | 'search-x'
  | 'search'
  | 'send-horizontal'
  | 'send'
  | 'server-cog'
  | 'server-off'
  | 'settings'
  | 'shield-alert'
  | 'shield-check'
  | 'shield-off'
  | 'shield-plus'
  | 'shield-question-mark'
  | 'shield-x'
  | 'ship-wheel'
  | 'ship'
  | 'shopping-cart'
  | 'shovel'
  | 'shower-head'
  | 'shrink'
  | 'signal-high'
  | 'signal-low'
  | 'signal-medium'
  | 'signal-zero'
  | 'signal'
  | 'signature'
  | 'sliders-horizontal'
  | 'sliders-vertical'
  | 'smartphone-nfc'
  | 'snowflake'
  | 'sparkle'
  | 'sparkles'
  | 'speech'
  | 'spell-check'
  | 'square-arrow-down-left'
  | 'square-arrow-down-right'
  | 'square-arrow-down'
  | 'square-arrow-left'
  | 'square-arrow-out-down-left'
  | 'square-arrow-out-down-right'
  | 'square-arrow-out-up-left'
  | 'square-arrow-out-up-right'
  | 'square-arrow-right'
  | 'square-arrow-up-left'
  | 'square-arrow-up-right'
  | 'square-arrow-up'
  | 'square-chart-gantt'
  | 'square-check-big'
  | 'square-check'
  | 'square-chevron-down'
  | 'square-chevron-left'
  | 'square-chevron-right'
  | 'square-chevron-up'
  | 'square-dashed-kanban'
  | 'square-kanban'
  | 'square-parking-off'
  | 'square-pen'
  | 'square-plus'
  | 'square-scissors'
  | 'square-stack'
  | 'square-terminal'
  | 'square-x'
  | 'star-off'
  | 'star'
  | 'sun'
  | 'sword'
  | 'tag'
  | 'telescope'
  | 'terminal'
  | 'text-align-center'
  | 'text-cursor-input'
  | 'text-cursor'
  | 'text-search'
  | 'thermometer'
  | 'thumbs-down'
  | 'thumbs-up'
  | 'ticket-check'
  | 'ticket-x'
  | 'timer-off'
  | 'timer'
  | 'toggle-left'
  | 'toggle-right'
  | 'tornado'
  | 'touchpad-off'
  | 'trash-2'
  | 'trash'
  | 'triangle-alert'
  | 'umbrella-off'
  | 'undo-dot'
  | 'undo'
  | 'unfold-horizontal'
  | 'unfold-vertical'
  | 'unplug'
  | 'upload'
  | 'user-check'
  | 'user-cog'
  | 'user-pen'
  | 'user-round-check'
  | 'user-round-cog'
  | 'user-round-pen'
  | 'user-round-x'
  | 'user-round'
  | 'user-x'
  | 'user'
  | 'users-round'
  | 'users'
  | 'vault'
  | 'vibrate-off'
  | 'vibrate'
  | 'video-off'
  | 'volume-off'
  | 'volume-x'
  | 'vote'
  | 'washing-machine'
  | 'waves-horizontal'
  | 'webhook-off'
  | 'wheat-off'
  | 'wifi-high'
  | 'wifi-low'
  | 'wifi-off'
  | 'wifi-pen'
  | 'wifi-zero'
  | 'wifi'
  | 'wine-off'
  | 'x'
  | 'zap-off';

@jis3r/icons Documentation

What's inside @jis3r/icons