@app-studio/components
Icon
A comprehensive collection of SVG icons powered by [Lucide React](https://lucide.dev/), offering consistent styling, customizable colors, sizes, and orientations. All icons are optimized for accessibility and performance.
View component sourceImport
ts
import { Icon } from '@app-studio/components';New to the library? Complete installation and provider setup first.
Interactive examples
Try the component, then open Code to copy the complete example.
Loading preview…
import React from 'react';
import { Horizontal, Vertical, Text } from 'app-studio';
import { Icon } from '@app-studio/components';
export const DefaultIcon = () => (
<Horizontal gap={16} flexWrap="wrap" alignItems="center">
<Icon name="home" widthHeight={28} color="theme-primary" />
<Icon name="settings" widthHeight={28} color="color-gray-700" />
<Icon name="heart" widthHeight={28} color="color-red-500" filled />
<Icon name="star" widthHeight={28} color="color-amber-500" filled />
<Icon name="bell" widthHeight={28} color="color-gray-700" />
<Vertical alignItems="center" gap={4}>
<Icon name="circle-help" widthHeight={28} color="color-blue-500" />
<Text fontSize={10} color="color-gray-500">
by name
</Text>
</Vertical>
</Horizontal>
);Props
Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.
Scroll horizontally to see every column.
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | 'currentColor' | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `<color>` **Initial value**: `canvastext` | Chrome | Firefox | Safari | Edge | IE | | :----: | :-----: | :----: | :----: | :---: | | **1** | **1** | **1** | **12** | **3** |Source |
filled | boolean | false | See the type and source declaration for this property.Source |
orientation | "left" | "right" | "up" | "down""left""right""up""down" | — | See the type and source declaration for this property.Source |
name | View type"ratio" | "target" | "form" | "rows" | "list" | "download" | "blend" | "type" | "filter" | "scale" | "x" | "columns" | "container" | "grid" | "code" | "link" | "map" | "menu" | "option" | "search" | "section" | "table" | "video" | "circle" | "image" | "text" | "view" | "square" | "pill" | "triangle" | "repeat" | "space" | "scroll" | "focus" | "ghost" | "files" | "file" | "underline" | "dot" | "donut" | "a-arrow-down" | "a-arrow-up" | "a-large-small" | "accessibility" | "activity" | "air-vent" | "airplay" | "alarm-clock-check" | "alarm-check" | "alarm-clock-minus" | "alarm-minus" | "alarm-clock-off" | "alarm-clock-plus" | "alarm-plus" | "alarm-clock" | "alarm-smoke" | "album" | "align-center-horizontal" | "align-center-vertical" | "align-end-horizontal" | "align-end-vertical" | "align-horizontal-distribute-center" | "align-horizontal-distribute-end" | "align-horizontal-distribute-start" | "align-horizontal-justify-center" | "align-horizontal-justify-end" | "align-horizontal-justify-start" | "align-horizontal-space-around" | "align-horizontal-space-between" | "align-start-horizontal" | "align-start-vertical" | "align-vertical-distribute-center" | "align-vertical-distribute-end" | "align-vertical-distribute-start" | "align-vertical-justify-center" | "align-vertical-justify-end" | "align-vertical-justify-start" | "align-vertical-space-around" | "align-vertical-space-between" | "ambulance" | "ampersand" | "ampersands" | "amphora" | "anchor" | "angry" | "annoyed" | "antenna" | "anvil" | "aperture" | "app-window-mac" | "app-window" | "apple" | "archive-restore" | "archive-x" | "archive" | "armchair" | "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-01" | "arrow-down-1-0" | "arrow-down-10" | "arrow-down-a-z" | "arrow-down-az" | "arrow-down-from-line" | "arrow-down-left" | "arrow-down-narrow-wide" | "arrow-down-right" | "arrow-down-to-dot" | "arrow-down-to-line" | "arrow-down-up" | "arrow-down-wide-narrow" | "sort-desc" | "arrow-down-z-a" | "arrow-down-za" | "arrow-down" | "arrow-left-from-line" | "arrow-left-right" | "arrow-left-to-line" | "arrow-left" | "arrow-right-from-line" | "arrow-right-left" | "arrow-right-to-line" | "arrow-right" | "arrow-up-0-1" | "arrow-up-01" | "arrow-up-1-0" | "arrow-up-10" | "arrow-up-a-z" | "arrow-up-az" | "arrow-up-down" | "arrow-up-from-dot" | "arrow-up-from-line" | "arrow-up-left" | "arrow-up-narrow-wide" | "sort-asc" | "arrow-up-right" | "arrow-up-to-line" | "arrow-up-wide-narrow" | "arrow-up-z-a" | "arrow-up-za" | "arrow-up" | "arrows-up-from-line" | "asterisk" | "at-sign" | "atom" | "audio-lines" | "audio-waveform" | "award" | "axe" | "axis-3d" | "axis-3-d" | "baby" | "backpack" | "badge-alert" | "badge-cent" | "badge-check" | "verified" | "badge-dollar-sign" | "badge-euro" | "badge-indian-rupee" | "badge-info" | "badge-japanese-yen" | "badge-minus" | "badge-percent" | "badge-plus" | "badge-pound-sterling" | "badge-question-mark" | "badge-help" | "badge-russian-ruble" | "badge-swiss-franc" | "badge-turkish-lira" | "badge-x" | "badge" | "baggage-claim" | "balloon" | "ban" | "banana" | "bandage" | "banknote-arrow-down" | "banknote-arrow-up" | "banknote-x" | "banknote" | "barcode" | "barrel" | "baseline" | "bath" | "battery-charging" | "battery-full" | "battery-low" | "battery-medium" | "battery-plus" | "battery-warning" | "battery" | "beaker" | "bean-off" | "bean" | "bed-double" | "bed-single" | "bed" | "beef" | "beer-off" | "beer" | "bell-dot" | "bell-electric" | "bell-minus" | "bell-off" | "bell-plus" | "bell-ring" | "bell" | "between-horizontal-end" | "between-horizonal-end" | "between-horizontal-start" | "between-horizonal-start" | "between-vertical-end" | "between-vertical-start" | "biceps-flexed" | "bike" | "binary" | "binoculars" | "biohazard" | "bird" | "birdhouse" | "bitcoin" | "blinds" | "blocks" | "bluetooth-connected" | "bluetooth-off" | "bluetooth-searching" | "bluetooth" | "bold" | "bolt" | "bomb" | "bone" | "book-a" | "book-alert" | "book-audio" | "book-check" | "book-copy" | "book-dashed" | "book-template" | "book-down" | "book-headphones" | "book-heart" | "book-image" | "book-key" | "book-lock" | "book-marked" | "book-minus" | "book-open-check" | "book-open-text" | "book-open" | "book-plus" | "book-search" | "book-text" | "book-type" | "book-up-2" | "book-up" | "book-user" | "book-x" | "book" | "bookmark-check" | "bookmark-minus" | "bookmark-plus" | "bookmark-x" | "bookmark" | "boom-box" | "bot-message-square" | "bot-off" | "bot" | "bottle-wine" | "bow-arrow" | "box" | "boxes" | "braces" | "curly-braces" | "brackets" | "brain-circuit" | "brain-cog" | "brain" | "brick-wall-fire" | "brick-wall-shield" | "brick-wall" | "briefcase-business" | "briefcase-conveyor-belt" | "briefcase-medical" | "briefcase" | "bring-to-front" | "brush-cleaning" | "brush" | "bubbles" | "bug-off" | "bug-play" | "bug" | "building-2" | "building" | "bus-front" | "bus" | "cable-car" | "cable" | "cake-slice" | "cake" | "calculator" | "calendar-1" | "calendar-arrow-down" | "calendar-arrow-up" | "calendar-check-2" | "calendar-check" | "calendar-clock" | "calendar-cog" | "calendar-days" | "calendar-fold" | "calendar-heart" | "calendar-minus-2" | "calendar-minus" | "calendar-off" | "calendar-plus-2" | "calendar-plus" | "calendar-range" | "calendar-search" | "calendar-sync" | "calendar-x-2" | "calendar-x" | "calendar" | "calendars" | "camera-off" | "camera" | "candy-cane" | "candy-off" | "candy" | "cannabis-off" | "cannabis" | "captions-off" | "captions" | "subtitles" | "car-front" | "car-taxi-front" | "car" | "caravan" | "card-sim" | "carrot" | "case-lower" | "case-sensitive" | "case-upper" | "cassette-tape" | "cast" | "castle" | "cat" | "cctv" | "chart-area" | "area-chart" | "chart-bar-big" | "bar-chart-horizontal-big" | "chart-bar-decreasing" | "chart-bar-increasing" | "chart-bar-stacked" | "chart-bar" | "bar-chart-horizontal" | "chart-candlestick" | "candlestick-chart" | "chart-column-big" | "bar-chart-big" | "chart-column-decreasing" | "chart-column-increasing" | "bar-chart-4" | "chart-column-stacked" | "chart-column" | "bar-chart-3" | "chart-gantt" | "chart-line" | "line-chart" | "chart-network" | "chart-no-axes-column-decreasing" | "chart-no-axes-column-increasing" | "bar-chart" | "chart-no-axes-column" | "bar-chart-2" | "chart-no-axes-combined" | "chart-no-axes-gantt" | "gantt-chart" | "chart-pie" | "pie-chart" | "chart-scatter" | "scatter-chart" | "chart-spline" | "check-check" | "check-line" | "check" | "chef-hat" | "cherry" | "chess-bishop" | "chess-king" | "chess-knight" | "chess-pawn" | "chess-queen" | "chess-rook" | "chevron-down" | "chevron-first" | "chevron-last" | "chevron-left" | "chevron-right" | "chevron-up" | "chevrons-down-up" | "chevrons-down" | "chevrons-left-right-ellipsis" | "chevrons-left-right" | "chevrons-left" | "chevrons-right-left" | "chevrons-right" | "chevrons-up-down" | "chevrons-up" | "chromium" | "chrome" | "church" | "cigarette-off" | "cigarette" | "circle-alert" | "alert-circle" | "circle-arrow-down" | "arrow-down-circle" | "circle-arrow-left" | "arrow-left-circle" | "circle-arrow-out-down-left" | "arrow-down-left-from-circle" | "circle-arrow-out-down-right" | "arrow-down-right-from-circle" | "circle-arrow-out-up-left" | "arrow-up-left-from-circle" | "circle-arrow-out-up-right" | "arrow-up-right-from-circle" | "circle-arrow-right" | "arrow-right-circle" | "circle-arrow-up" | "arrow-up-circle" | "circle-check-big" | "check-circle" | "circle-check" | "check-circle-2" | "circle-chevron-down" | "chevron-down-circle" | "circle-chevron-left" | "chevron-left-circle" | "circle-chevron-right" | "chevron-right-circle" | "circle-chevron-up" | "chevron-up-circle" | "circle-dashed" | "circle-divide" | "divide-circle" | "circle-dollar-sign" | "circle-dot-dashed" | "circle-dot" | "circle-ellipsis" | "circle-equal" | "circle-fading-arrow-up" | "circle-fading-plus" | "circle-gauge" | "gauge-circle" | "circle-minus" | "minus-circle" | "circle-off" | "circle-parking-off" | "parking-circle-off" | "circle-parking" | "parking-circle" | "circle-pause" | "pause-circle" | "circle-percent" | "percent-circle" | "circle-pile" | "circle-play" | "play-circle" | "circle-plus" | "plus-circle" | "circle-pound-sterling" | "circle-power" | "power-circle" | "circle-question-mark" | "help-circle" | "circle-help" | "circle-slash-2" | "circle-slashed" | "circle-slash" | "circle-small" | "circle-star" | "circle-stop" | "stop-circle" | "circle-user-round" | "user-circle-2" | "circle-user" | "user-circle" | "circle-x" | "x-circle" | "circuit-board" | "citrus" | "clapperboard" | "clipboard-check" | "clipboard-clock" | "clipboard-copy" | "clipboard-list" | "clipboard-minus" | "clipboard-paste" | "clipboard-pen-line" | "clipboard-signature" | "clipboard-pen" | "clipboard-edit" | "clipboard-plus" | "clipboard-type" | "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-alert" | "clock-arrow-down" | "clock-arrow-up" | "clock-check" | "clock-fading" | "clock-plus" | "clock" | "closed-caption" | "cloud-alert" | "cloud-backup" | "cloud-check" | "cloud-cog" | "cloud-download" | "download-cloud" | "cloud-drizzle" | "cloud-fog" | "cloud-hail" | "cloud-lightning" | "cloud-moon-rain" | "cloud-moon" | "cloud-off" | "cloud-rain-wind" | "cloud-rain" | "cloud-snow" | "cloud-sun-rain" | "cloud-sun" | "cloud-sync" | "cloud-upload" | "upload-cloud" | "cloud" | "cloudy" | "clover" | "club" | "code-xml" | "code-2" | "codepen" | "codesandbox" | "coffee" | "cog" | "coins" | "columns-2" | "columns-3-cog" | "columns-settings" | "table-config" | "columns-3" | "panels-left-right" | "columns-4" | "combine" | "command" | "compass" | "component" | "computer" | "concierge-bell" | "cone" | "construction" | "contact-round" | "contact-2" | "contact" | "contrast" | "cookie" | "cooking-pot" | "copy-check" | "copy-minus" | "copy-plus" | "copy-slash" | "copy-x" | "copy" | "copyleft" | "copyright" | "corner-down-left" | "corner-down-right" | "corner-left-down" | "corner-left-up" | "corner-right-down" | "corner-right-up" | "corner-up-left" | "corner-up-right" | "cpu" | "creative-commons" | "credit-card" | "croissant" | "crop" | "cross" | "crosshair" | "crown" | "cuboid" | "cup-soda" | "currency" | "cylinder" | "dam" | "database-backup" | "database-zap" | "database" | "decimals-arrow-left" | "decimals-arrow-right" | "delete" | "dessert" | "diameter" | "diamond-minus" | "diamond-percent" | "percent-diamond" | "diamond-plus" | "diamond" | "dice-1" | "dice-2" | "dice-3" | "dice-4" | "dice-5" | "dice-6" | "dices" | "diff" | "disc-2" | "disc-3" | "disc-album" | "disc" | "divide" | "dna-off" | "dna" | "dock" | "dog" | "dollar-sign" | "door-closed-locked" | "door-closed" | "door-open" | "drafting-compass" | "drama" | "dribbble" | "drill" | "drone" | "droplet-off" | "droplet" | "droplets" | "drum" | "drumstick" | "dumbbell" | "ear-off" | "ear" | "earth-lock" | "earth" | "globe-2" | "eclipse" | "egg-fried" | "egg-off" | "egg" | "ellipsis-vertical" | "more-vertical" | "ellipsis" | "more-horizontal" | "equal-approximately" | "equal-not" | "equal" | "eraser" | "ethernet-port" | "euro" | "ev-charger" | "expand" | "external-link" | "eye-closed" | "eye-off" | "eye" | "facebook" | "factory" | "fan" | "fast-forward" | "feather" | "fence" | "ferris-wheel" | "figma" | "file-archive" | "file-axis-3d" | "file-axis-3-d" | "file-badge" | "file-badge-2" | "file-box" | "file-braces-corner" | "file-json-2" | "file-braces" | "file-json" | "file-chart-column-increasing" | "file-bar-chart" | "file-chart-column" | "file-bar-chart-2" | "file-chart-line" | "file-line-chart" | "file-chart-pie" | "file-pie-chart" | "file-check-corner" | "file-check-2" | "file-check" | "file-clock" | "file-code-corner" | "file-code-2" | "file-code" | "file-cog" | "file-cog-2" | "file-diff" | "file-digit" | "file-down" | "file-exclamation-point" | "file-warning" | "file-headphone" | "file-audio" | "file-audio-2" | "file-heart" | "file-image" | "file-input" | "file-key" | "file-key-2" | "file-lock" | "file-lock-2" | "file-minus-corner" | "file-minus-2" | "file-minus" | "file-music" | "file-output" | "file-pen-line" | "file-signature" | "file-pen" | "file-edit" | "file-play" | "file-video" | "file-plus-corner" | "file-plus-2" | "file-plus" | "file-question-mark" | "file-question" | "file-scan" | "file-search-corner" | "file-search-2" | "file-search" | "file-signal" | "file-volume-2" | "file-sliders" | "file-spreadsheet" | "file-stack" | "file-symlink" | "file-terminal" | "file-text" | "file-type-corner" | "file-type-2" | "file-type" | "file-up" | "file-user" | "file-video-camera" | "file-video-2" | "file-volume" | "file-x-corner" | "file-x-2" | "file-x" | "film" | "fingerprint-pattern" | "fingerprint" | "fire-extinguisher" | "fish-off" | "fish-symbol" | "fish" | "fishing-hook" | "flag-off" | "flag-triangle-left" | "flag-triangle-right" | "flag" | "flame-kindling" | "flame" | "flashlight-off" | "flashlight" | "flask-conical-off" | "flask-conical" | "flask-round" | "flip-horizontal-2" | "flip-horizontal" | "flip-vertical-2" | "flip-vertical" | "flower-2" | "flower" | "fold-horizontal" | "fold-vertical" | "folder-archive" | "folder-check" | "folder-clock" | "folder-closed" | "folder-code" | "folder-cog" | "folder-cog-2" | "folder-dot" | "folder-down" | "folder-git-2" | "folder-git" | "folder-heart" | "folder-input" | "folder-kanban" | "folder-key" | "folder-lock" | "folder-minus" | "folder-open-dot" | "folder-open" | "folder-output" | "folder-pen" | "folder-edit" | "folder-plus" | "folder-root" | "folder-search-2" | "folder-search" | "folder-symlink" | "folder-sync" | "folder-tree" | "folder-up" | "folder-x" | "folder" | "folders" | "footprints" | "forklift" | "forward" | "frame" | "framer" | "frown" | "fuel" | "fullscreen" | "funnel-plus" | "funnel-x" | "filter-x" | "funnel" | "gallery-horizontal-end" | "gallery-horizontal" | "gallery-thumbnails" | "gallery-vertical-end" | "gallery-vertical" | "gamepad-2" | "gamepad-directional" | "gamepad" | "gauge" | "gavel" | "gem" | "georgian-lari" | "gift" | "git-branch-minus" | "git-branch-plus" | "git-branch" | "git-commit-horizontal" | "git-commit" | "git-commit-vertical" | "git-compare-arrows" | "git-compare" | "git-fork" | "git-graph" | "git-merge" | "git-pull-request-arrow" | "git-pull-request-closed" | "git-pull-request-create-arrow" | "git-pull-request-create" | "git-pull-request-draft" | "git-pull-request" | "github" | "gitlab" | "glass-water" | "glasses" | "globe-lock" | "globe" | "goal" | "gpu" | "graduation-cap" | "grape" | "grid-2x2-check" | "grid-2-x-2-check" | "grid-2x2-plus" | "grid-2-x-2-plus" | "grid-2x2-x" | "grid-2-x-2-x" | "grid-2x2" | "grid-2-x-2" | "grid-3x2" | "grid-3x3" | "grid-3-x-3" | "grip-horizontal" | "grip-vertical" | "grip" | "group" | "guitar" | "ham" | "hamburger" | "hammer" | "hand-coins" | "hand-fist" | "hand-grab" | "grab" | "hand-heart" | "hand-helping" | "helping-hand" | "hand-metal" | "hand-platter" | "hand" | "handbag" | "handshake" | "hard-drive-download" | "hard-drive-upload" | "hard-drive" | "hard-hat" | "hash" | "hat-glasses" | "haze" | "hd" | "hdmi-port" | "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5" | "heading-6" | "heading" | "headphone-off" | "headphones" | "headset" | "heart-crack" | "heart-handshake" | "heart-minus" | "heart-off" | "heart-plus" | "heart-pulse" | "heart" | "heater" | "helicopter" | "hexagon" | "highlighter" | "history" | "hop-off" | "hop" | "hospital" | "hotel" | "hourglass" | "house-heart" | "house-plug" | "house-plus" | "house-wifi" | "house" | "home" | "ice-cream-bowl" | "ice-cream-2" | "ice-cream-cone" | "ice-cream" | "id-card-lanyard" | "id-card" | "image-down" | "image-minus" | "image-off" | "image-play" | "image-plus" | "image-up" | "image-upscale" | "images" | "import" | "inbox" | "indian-rupee" | "infinity" | "info" | "inspection-panel" | "instagram" | "italic" | "iteration-ccw" | "iteration-cw" | "japanese-yen" | "joystick" | "kanban" | "kayak" | "key-round" | "key-square" | "key" | "keyboard-music" | "keyboard-off" | "keyboard" | "lamp-ceiling" | "lamp-desk" | "lamp-floor" | "lamp-wall-down" | "lamp-wall-up" | "lamp" | "land-plot" | "landmark" | "languages" | "laptop-minimal-check" | "laptop-minimal" | "laptop-2" | "laptop" | "lasso-select" | "lasso" | "laugh" | "layers-2" | "layers-plus" | "layers" | "layers-3" | "layout-dashboard" | "layout-grid" | "layout-list" | "layout-panel-left" | "layout-panel-top" | "layout-template" | "leaf" | "leafy-green" | "lectern" | "library-big" | "library" | "life-buoy" | "ligature" | "lightbulb-off" | "lightbulb" | "line-squiggle" | "link-2-off" | "link-2" | "linkedin" | "list-check" | "list-checks" | "list-chevrons-down-up" | "list-chevrons-up-down" | "list-collapse" | "list-end" | "list-filter-plus" | "list-filter" | "list-indent-decrease" | "outdent" | "indent-decrease" | "list-indent-increase" | "indent" | "indent-increase" | "list-minus" | "list-music" | "list-ordered" | "list-plus" | "list-restart" | "list-start" | "list-todo" | "list-tree" | "list-video" | "list-x" | "loader-circle" | "loader-2" | "loader-pinwheel" | "loader" | "locate-fixed" | "locate-off" | "locate" | "lock-keyhole-open" | "unlock-keyhole" | "lock-keyhole" | "lock-open" | "unlock" | "lock" | "log-in" | "log-out" | "logs" | "lollipop" | "luggage" | "magnet" | "mail-check" | "mail-minus" | "mail-open" | "mail-plus" | "mail-question-mark" | "mail-question" | "mail-search" | "mail-warning" | "mail-x" | "mail" | "mailbox" | "mails" | "map-minus" | "map-pin-check-inside" | "map-pin-check" | "map-pin-house" | "map-pin-minus-inside" | "map-pin-minus" | "map-pin-off" | "map-pin-pen" | "location-edit" | "map-pin-plus-inside" | "map-pin-plus" | "map-pin-x-inside" | "map-pin-x" | "map-pin" | "map-pinned" | "map-plus" | "mars-stroke" | "mars" | "martini" | "maximize-2" | "maximize" | "medal" | "megaphone-off" | "megaphone" | "meh" | "memory-stick" | "merge" | "message-circle-code" | "message-circle-dashed" | "message-circle-heart" | "message-circle-more" | "message-circle-off" | "message-circle-plus" | "message-circle-question-mark" | "message-circle-question" | "message-circle-reply" | "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-lock" | "message-square-more" | "message-square-off" | "message-square-plus" | "message-square-quote" | "message-square-reply" | "message-square-share" | "message-square-text" | "message-square-warning" | "message-square-x" | "message-square" | "messages-square" | "mic-off" | "mic-vocal" | "mic-2" | "mic" | "microchip" | "microscope" | "microwave" | "milestone" | "milk-off" | "milk" | "minimize-2" | "minimize" | "minus" | "monitor-check" | "monitor-cloud" | "monitor-cog" | "monitor-dot" | "monitor-down" | "monitor-off" | "monitor-pause" | "monitor-play" | "monitor-smartphone" | "monitor-speaker" | "monitor-stop" | "monitor-up" | "monitor-x" | "monitor" | "moon-star" | "moon" | "motorbike" | "mountain-snow" | "mountain" | "mouse-off" | "mouse-pointer-2-off" | "mouse-pointer-2" | "mouse-pointer-ban" | "mouse-pointer-click" | "mouse-pointer" | "mouse" | "move-3d" | "move-3-d" | "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" | "move" | "music-2" | "music-3" | "music-4" | "music" | "navigation-2-off" | "navigation-2" | "navigation-off" | "navigation" | "network" | "newspaper" | "nfc" | "non-binary" | "notebook-pen" | "notebook-tabs" | "notebook-text" | "notebook" | "notepad-text-dashed" | "notepad-text" | "nut-off" | "nut" | "octagon-alert" | "alert-octagon" | "octagon-minus" | "octagon-pause" | "pause-octagon" | "octagon-x" | "x-octagon" | "octagon" | "omega" | "orbit" | "origami" | "package-2" | "package-check" | "package-minus" | "package-open" | "package-plus" | "package-search" | "package-x" | "package" | "paint-bucket" | "paint-roller" | "paintbrush-vertical" | "paintbrush-2" | "paintbrush" | "palette" | "panda" | "panel-bottom-close" | "panel-bottom-dashed" | "panel-bottom-inactive" | "panel-bottom-open" | "panel-bottom" | "panel-left-close" | "sidebar-close" | "panel-left-dashed" | "panel-left-inactive" | "panel-left-open" | "sidebar-open" | "panel-left-right-dashed" | "panel-left" | "sidebar" | "panel-right-close" | "panel-right-dashed" | "panel-right-inactive" | "panel-right-open" | "panel-right" | "panel-top-bottom-dashed" | "panel-top-close" | "panel-top-dashed" | "panel-top-inactive" | "panel-top-open" | "panel-top" | "panels-left-bottom" | "panels-right-bottom" | "panels-top-left" | "layout" | "paperclip" | "parentheses" | "parking-meter" | "party-popper" | "pause" | "paw-print" | "pc-case" | "pen-line" | "edit-3" | "pen-off" | "pen-tool" | "pen" | "edit-2" | "pencil-line" | "pencil-off" | "pencil-ruler" | "pencil" | "pentagon" | "percent" | "person-standing" | "philippine-peso" | "phone-call" | "phone-forwarded" | "phone-incoming" | "phone-missed" | "phone-off" | "phone-outgoing" | "phone" | "pi" | "piano" | "pickaxe" | "picture-in-picture-2" | "picture-in-picture" | "piggy-bank" | "pilcrow-left" | "pilcrow-right" | "pilcrow" | "pill-bottle" | "pin-off" | "pin" | "pipette" | "pizza" | "plane-landing" | "plane-takeoff" | "plane" | "play" | "plug-2" | "plug-zap" | "plug-zap-2" | "plug" | "plus" | "pocket-knife" | "pocket" | "podcast" | "pointer-off" | "pointer" | "popcorn" | "popsicle" | "pound-sterling" | "power-off" | "power" | "presentation" | "printer-check" | "printer" | "projector" | "proportions" | "puzzle" | "pyramid" | "qr-code" | "quote" | "rabbit" | "radar" | "radiation" | "radical" | "radio-receiver" | "radio-tower" | "radio" | "radius" | "rail-symbol" | "rainbow" | "rat" | "receipt-cent" | "receipt-euro" | "receipt-indian-rupee" | "receipt-japanese-yen" | "receipt-pound-sterling" | "receipt-russian-ruble" | "receipt-swiss-franc" | "receipt-text" | "receipt-turkish-lira" | "receipt" | "rectangle-circle" | "rectangle-ellipsis" | "form-input" | "rectangle-goggles" | "rectangle-horizontal" | "rectangle-vertical" | "recycle" | "redo-2" | "redo-dot" | "redo" | "refresh-ccw-dot" | "refresh-ccw" | "refresh-cw-off" | "refresh-cw" | "refrigerator" | "regex" | "remove-formatting" | "repeat-1" | "repeat-2" | "replace-all" | "replace" | "reply-all" | "reply" | "rewind" | "ribbon" | "rocket" | "rocking-chair" | "roller-coaster" | "rose" | "rotate-3d" | "rotate-3-d" | "rotate-ccw-key" | "rotate-ccw-square" | "rotate-ccw" | "rotate-cw-square" | "rotate-cw" | "route-off" | "route" | "router" | "rows-2" | "rows-3" | "panels-top-bottom" | "rows-4" | "rss" | "ruler-dimension-line" | "ruler" | "russian-ruble" | "sailboat" | "salad" | "sandwich" | "satellite-dish" | "satellite" | "saudi-riyal" | "save-all" | "save-off" | "save" | "scale-3d" | "scale-3-d" | "scaling" | "scan-barcode" | "scan-eye" | "scan-face" | "scan-heart" | "scan-line" | "scan-qr-code" | "scan-search" | "scan-text" | "scan" | "school" | "scissors-line-dashed" | "scissors" | "scooter" | "screen-share-off" | "screen-share" | "scroll-text" | "search-alert" | "search-check" | "search-code" | "search-slash" | "search-x" | "send-horizontal" | "send-horizonal" | "send-to-back" | "send" | "separator-horizontal" | "separator-vertical" | "server-cog" | "server-crash" | "server-off" | "server" | "settings-2" | "settings" | "shapes" | "share-2" | "share" | "sheet" | "shell" | "shield-alert" | "shield-ban" | "shield-check" | "shield-ellipsis" | "shield-half" | "shield-minus" | "shield-off" | "shield-plus" | "shield-question-mark" | "shield-question" | "shield-user" | "shield-x" | "shield-close" | "shield" | "ship-wheel" | "ship" | "shirt" | "shopping-bag" | "shopping-basket" | "shopping-cart" | "shovel" | "shower-head" | "shredder" | "shrimp" | "shrink" | "shrub" | "shuffle" | "sigma" | "signal-high" | "signal-low" | "signal-medium" | "signal-zero" | "signal" | "signature" | "signpost-big" | "signpost" | "siren" | "skip-back" | "skip-forward" | "skull" | "slack" | "slash" | "slice" | "sliders-horizontal" | "sliders-vertical" | "sliders" | "smartphone-charging" | "smartphone-nfc" | "smartphone" | "smile-plus" | "smile" | "snail" | "snowflake" | "soap-dispenser-droplet" | "sofa" | "solar-panel" | "soup" | "spade" | "sparkle" | "sparkles" | "stars" | "speaker" | "speech" | "spell-check-2" | "spell-check" | "spline-pointer" | "spline" | "split" | "spool" | "spotlight" | "spray-can" | "sprout" | "square-activity" | "activity-square" | "square-arrow-down-left" | "arrow-down-left-square" | "square-arrow-down-right" | "arrow-down-right-square" | "square-arrow-down" | "arrow-down-square" | "square-arrow-left" | "arrow-left-square" | "square-arrow-out-down-left" | "arrow-down-left-from-square" | "square-arrow-out-down-right" | "arrow-down-right-from-square" | "square-arrow-out-up-left" | "arrow-up-left-from-square" | "square-arrow-out-up-right" | "arrow-up-right-from-square" | "square-arrow-right" | "arrow-right-square" | "square-arrow-up-left" | "arrow-up-left-square" | "square-arrow-up-right" | "arrow-up-right-square" | "square-arrow-up" | "arrow-up-square" | "square-asterisk" | "asterisk-square" | "square-bottom-dashed-scissors" | "scissors-square-dashed-bottom" | "square-chart-gantt" | "gantt-chart-square" | "square-gantt-chart" | "square-check-big" | "check-square" | "square-check" | "check-square-2" | "square-chevron-down" | "chevron-down-square" | "square-chevron-left" | "chevron-left-square" | "square-chevron-right" | "chevron-right-square" | "square-chevron-up" | "chevron-up-square" | "square-code" | "code-square" | "square-dashed-bottom-code" | "square-dashed-bottom" | "square-dashed-kanban" | "kanban-square-dashed" | "square-dashed-mouse-pointer" | "mouse-pointer-square-dashed" | "square-dashed-top-solid" | "square-dashed" | "box-select" | "square-divide" | "divide-square" | "square-dot" | "dot-square" | "square-equal" | "equal-square" | "square-function" | "function-square" | "square-kanban" | "kanban-square" | "square-library" | "library-square" | "square-m" | "m-square" | "square-menu" | "menu-square" | "square-minus" | "minus-square" | "square-mouse-pointer" | "inspect" | "square-parking-off" | "parking-square-off" | "square-parking" | "parking-square" | "square-pause" | "square-pen" | "pen-box" | "edit" | "pen-square" | "square-percent" | "percent-square" | "square-pi" | "pi-square" | "square-pilcrow" | "pilcrow-square" | "square-play" | "play-square" | "square-plus" | "plus-square" | "square-power" | "power-square" | "square-radical" | "square-round-corner" | "square-scissors" | "scissors-square" | "square-sigma" | "sigma-square" | "square-slash" | "slash-square" | "square-split-horizontal" | "split-square-horizontal" | "square-split-vertical" | "split-square-vertical" | "square-square" | "square-stack" | "square-star" | "square-stop" | "square-terminal" | "terminal-square" | "square-user-round" | "user-square-2" | "square-user" | "user-square" | "square-x" | "x-square" | "squares-exclude" | "squares-intersect" | "squares-subtract" | "squares-unite" | "squircle-dashed" | "squircle" | "squirrel" | "stamp" | "star-half" | "star-off" | "star" | "step-back" | "step-forward" | "stethoscope" | "sticker" | "sticky-note" | "stone" | "store" | "stretch-horizontal" | "stretch-vertical" | "strikethrough" | "subscript" | "sun-dim" | "sun-medium" | "sun-moon" | "sun-snow" | "sun" | "sunrise" | "sunset" | "superscript" | "swatch-book" | "swiss-franc" | "switch-camera" | "sword" | "swords" | "syringe" | "table-2" | "table-cells-merge" | "table-cells-split" | "table-columns-split" | "table-of-contents" | "table-properties" | "table-rows-split" | "tablet-smartphone" | "tablet" | "tablets" | "tag" | "tags" | "tally-1" | "tally-2" | "tally-3" | "tally-4" | "tally-5" | "tangent" | "telescope" | "tent-tree" | "tent" | "terminal" | "test-tube-diagonal" | "test-tube-2" | "test-tube" | "test-tubes" | "text-align-center" | "align-center" | "text-align-end" | "align-right" | "text-align-justify" | "align-justify" | "text-align-start" | "align-left" | "text-cursor-input" | "text-cursor" | "text-initial" | "letter-text" | "text-quote" | "text-search" | "text-select" | "text-selection" | "text-wrap" | "wrap-text" | "theater" | "thermometer-snowflake" | "thermometer-sun" | "thermometer" | "thumbs-down" | "thumbs-up" | "ticket-check" | "ticket-minus" | "ticket-percent" | "ticket-plus" | "ticket-slash" | "ticket-x" | "ticket" | "tickets-plane" | "tickets" | "timer-off" | "timer-reset" | "timer" | "toggle-left" | "toggle-right" | "toilet" | "tool-case" | "toolbox" | "tornado" | "torus" | "touchpad-off" | "touchpad" | "tower-control" | "toy-brick" | "tractor" | "traffic-cone" | "train-front-tunnel" | "train-front" | "train-track" | "tram-front" | "train" | "transgender" | "trash-2" | "trash" | "tree-deciduous" | "tree-palm" | "palmtree" | "tree-pine" | "trees" | "trello" | "trending-down" | "trending-up-down" | "trending-up" | "triangle-alert" | "alert-triangle" | "triangle-dashed" | "triangle-right" | "trophy" | "truck-electric" | "truck" | "turkish-lira" | "turntable" | "turtle" | "tv-minimal-play" | "tv-minimal" | "tv-2" | "tv" | "twitch" | "twitter" | "type-outline" | "umbrella-off" | "umbrella" | "undo-2" | "undo-dot" | "undo" | "unfold-horizontal" | "unfold-vertical" | "ungroup" | "university" | "school-2" | "unlink-2" | "unlink" | "unplug" | "upload" | "usb" | "user-check" | "user-cog" | "user-lock" | "user-minus" | "user-pen" | "user-plus" | "user-round-check" | "user-check-2" | "user-round-cog" | "user-cog-2" | "user-round-minus" | "user-minus-2" | "user-round-pen" | "user-round-plus" | "user-plus-2" | "user-round-search" | "user-round-x" | "user-x-2" | "user-round" | "user-2" | "user-search" | "user-star" | "user-x" | "user" | "users-round" | "users-2" | "users" | "utensils-crossed" | "fork-knife-crossed" | "utensils" | "fork-knife" | "utility-pole" | "van" | "variable" | "vault" | "vector-square" | "vegan" | "venetian-mask" | "venus-and-mars" | "venus" | "vibrate-off" | "vibrate" | "video-off" | "videotape" | "voicemail" | "volleyball" | "volume-1" | "volume-2" | "volume-off" | "volume-x" | "volume" | "vote" | "wallet-cards" | "wallet-minimal" | "wallet-2" | "wallet" | "wallpaper" | "wand-sparkles" | "wand-2" | "wand" | "warehouse" | "washing-machine" | "watch" | "waves-arrow-down" | "waves-arrow-up" | "waves-ladder" | "waves" | "waypoints" | "webcam" | "webhook-off" | "webhook" | "weight-tilde" | "weight" | "wheat-off" | "wheat" | "whole-word" | "wifi-cog" | "wifi-high" | "wifi-low" | "wifi-off" | "wifi-pen" | "wifi-sync" | "wifi-zero" | "wifi" | "wind-arrow-down" | "wind" | "wine-off" | "wine" | "workflow" | "worm" | "wrench" | "youtube" | "zap-off" | "zap" | "zoom-in" | "zoom-out""ratio""target""form""rows""list""download""blend""type""filter""scale""x""columns""container""grid""code""link""map""menu""option""search""section""table""video""circle""image""text""view""square""pill""triangle""repeat""space""scroll""focus""ghost""files""file""underline""dot""donut""a-arrow-down""a-arrow-up""a-large-small""accessibility""activity""air-vent""airplay""alarm-clock-check""alarm-check""alarm-clock-minus""alarm-minus""alarm-clock-off""alarm-clock-plus""alarm-plus""alarm-clock""alarm-smoke""album""align-center-horizontal""align-center-vertical""align-end-horizontal""align-end-vertical""align-horizontal-distribute-center""align-horizontal-distribute-end""align-horizontal-distribute-start""align-horizontal-justify-center""align-horizontal-justify-end""align-horizontal-justify-start""align-horizontal-space-around""align-horizontal-space-between""align-start-horizontal""align-start-vertical""align-vertical-distribute-center""align-vertical-distribute-end""align-vertical-distribute-start""align-vertical-justify-center""align-vertical-justify-end""align-vertical-justify-start""align-vertical-space-around""align-vertical-space-between""ambulance""ampersand""ampersands""amphora""anchor""angry""annoyed""antenna""anvil""aperture""app-window-mac""app-window""apple""archive-restore""archive-x""archive""armchair""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-01""arrow-down-1-0""arrow-down-10""arrow-down-a-z""arrow-down-az""arrow-down-from-line""arrow-down-left""arrow-down-narrow-wide""arrow-down-right""arrow-down-to-dot""arrow-down-to-line""arrow-down-up""arrow-down-wide-narrow""sort-desc""arrow-down-z-a""arrow-down-za""arrow-down""arrow-left-from-line""arrow-left-right""arrow-left-to-line""arrow-left""arrow-right-from-line""arrow-right-left""arrow-right-to-line""arrow-right""arrow-up-0-1""arrow-up-01""arrow-up-1-0""arrow-up-10""arrow-up-a-z""arrow-up-az""arrow-up-down""arrow-up-from-dot""arrow-up-from-line""arrow-up-left""arrow-up-narrow-wide""sort-asc""arrow-up-right""arrow-up-to-line""arrow-up-wide-narrow""arrow-up-z-a""arrow-up-za""arrow-up""arrows-up-from-line""asterisk""at-sign""atom""audio-lines""audio-waveform""award""axe""axis-3d""axis-3-d""baby""backpack""badge-alert""badge-cent""badge-check""verified""badge-dollar-sign""badge-euro""badge-indian-rupee""badge-info""badge-japanese-yen""badge-minus""badge-percent""badge-plus""badge-pound-sterling""badge-question-mark""badge-help""badge-russian-ruble""badge-swiss-franc""badge-turkish-lira""badge-x""badge""baggage-claim""balloon""ban""banana""bandage""banknote-arrow-down""banknote-arrow-up""banknote-x""banknote""barcode""barrel""baseline""bath""battery-charging""battery-full""battery-low""battery-medium""battery-plus""battery-warning""battery""beaker""bean-off""bean""bed-double""bed-single""bed""beef""beer-off""beer""bell-dot""bell-electric""bell-minus""bell-off""bell-plus""bell-ring""bell""between-horizontal-end""between-horizonal-end""between-horizontal-start""between-horizonal-start""between-vertical-end""between-vertical-start""biceps-flexed""bike""binary""binoculars""biohazard""bird""birdhouse""bitcoin""blinds""blocks""bluetooth-connected""bluetooth-off""bluetooth-searching""bluetooth""bold""bolt""bomb""bone""book-a""book-alert""book-audio""book-check""book-copy""book-dashed""book-template""book-down""book-headphones""book-heart""book-image""book-key""book-lock""book-marked""book-minus""book-open-check""book-open-text""book-open""book-plus""book-search""book-text""book-type""book-up-2""book-up""book-user""book-x""book""bookmark-check""bookmark-minus""bookmark-plus""bookmark-x""bookmark""boom-box""bot-message-square""bot-off""bot""bottle-wine""bow-arrow""box""boxes""braces""curly-braces""brackets""brain-circuit""brain-cog""brain""brick-wall-fire""brick-wall-shield""brick-wall""briefcase-business""briefcase-conveyor-belt""briefcase-medical""briefcase""bring-to-front""brush-cleaning""brush""bubbles""bug-off""bug-play""bug""building-2""building""bus-front""bus""cable-car""cable""cake-slice""cake""calculator""calendar-1""calendar-arrow-down""calendar-arrow-up""calendar-check-2""calendar-check""calendar-clock""calendar-cog""calendar-days""calendar-fold""calendar-heart""calendar-minus-2""calendar-minus""calendar-off""calendar-plus-2""calendar-plus""calendar-range""calendar-search""calendar-sync""calendar-x-2""calendar-x""calendar""calendars""camera-off""camera""candy-cane""candy-off""candy""cannabis-off""cannabis""captions-off""captions""subtitles""car-front""car-taxi-front""car""caravan""card-sim""carrot""case-lower""case-sensitive""case-upper""cassette-tape""cast""castle""cat""cctv""chart-area""area-chart""chart-bar-big""bar-chart-horizontal-big""chart-bar-decreasing""chart-bar-increasing""chart-bar-stacked""chart-bar""bar-chart-horizontal""chart-candlestick""candlestick-chart""chart-column-big""bar-chart-big""chart-column-decreasing""chart-column-increasing""bar-chart-4""chart-column-stacked""chart-column""bar-chart-3""chart-gantt""chart-line""line-chart""chart-network""chart-no-axes-column-decreasing""chart-no-axes-column-increasing""bar-chart""chart-no-axes-column""bar-chart-2""chart-no-axes-combined""chart-no-axes-gantt""gantt-chart""chart-pie""pie-chart""chart-scatter""scatter-chart""chart-spline""check-check""check-line""check""chef-hat""cherry""chess-bishop""chess-king""chess-knight""chess-pawn""chess-queen""chess-rook""chevron-down""chevron-first""chevron-last""chevron-left""chevron-right""chevron-up""chevrons-down-up""chevrons-down""chevrons-left-right-ellipsis""chevrons-left-right""chevrons-left""chevrons-right-left""chevrons-right""chevrons-up-down""chevrons-up""chromium""chrome""church""cigarette-off""cigarette""circle-alert""alert-circle""circle-arrow-down""arrow-down-circle""circle-arrow-left""arrow-left-circle""circle-arrow-out-down-left""arrow-down-left-from-circle""circle-arrow-out-down-right""arrow-down-right-from-circle""circle-arrow-out-up-left""arrow-up-left-from-circle""circle-arrow-out-up-right""arrow-up-right-from-circle""circle-arrow-right""arrow-right-circle""circle-arrow-up""arrow-up-circle""circle-check-big""check-circle""circle-check""check-circle-2""circle-chevron-down""chevron-down-circle""circle-chevron-left""chevron-left-circle""circle-chevron-right""chevron-right-circle""circle-chevron-up""chevron-up-circle""circle-dashed""circle-divide""divide-circle""circle-dollar-sign""circle-dot-dashed""circle-dot""circle-ellipsis""circle-equal""circle-fading-arrow-up""circle-fading-plus""circle-gauge""gauge-circle""circle-minus""minus-circle""circle-off""circle-parking-off""parking-circle-off""circle-parking""parking-circle""circle-pause""pause-circle""circle-percent""percent-circle""circle-pile""circle-play""play-circle""circle-plus""plus-circle""circle-pound-sterling""circle-power""power-circle""circle-question-mark""help-circle""circle-help""circle-slash-2""circle-slashed""circle-slash""circle-small""circle-star""circle-stop""stop-circle""circle-user-round""user-circle-2""circle-user""user-circle""circle-x""x-circle""circuit-board""citrus""clapperboard""clipboard-check""clipboard-clock""clipboard-copy""clipboard-list""clipboard-minus""clipboard-paste""clipboard-pen-line""clipboard-signature""clipboard-pen""clipboard-edit""clipboard-plus""clipboard-type""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-alert""clock-arrow-down""clock-arrow-up""clock-check""clock-fading""clock-plus""clock""closed-caption""cloud-alert""cloud-backup""cloud-check""cloud-cog""cloud-download""download-cloud""cloud-drizzle""cloud-fog""cloud-hail""cloud-lightning""cloud-moon-rain""cloud-moon""cloud-off""cloud-rain-wind""cloud-rain""cloud-snow""cloud-sun-rain""cloud-sun""cloud-sync""cloud-upload""upload-cloud""cloud""cloudy""clover""club""code-xml""code-2""codepen""codesandbox""coffee""cog""coins""columns-2""columns-3-cog""columns-settings""table-config""columns-3""panels-left-right""columns-4""combine""command""compass""component""computer""concierge-bell""cone""construction""contact-round""contact-2""contact""contrast""cookie""cooking-pot""copy-check""copy-minus""copy-plus""copy-slash""copy-x""copy""copyleft""copyright""corner-down-left""corner-down-right""corner-left-down""corner-left-up""corner-right-down""corner-right-up""corner-up-left""corner-up-right""cpu""creative-commons""credit-card""croissant""crop""cross""crosshair""crown""cuboid""cup-soda""currency""cylinder""dam""database-backup""database-zap""database""decimals-arrow-left""decimals-arrow-right""delete""dessert""diameter""diamond-minus""diamond-percent""percent-diamond""diamond-plus""diamond""dice-1""dice-2""dice-3""dice-4""dice-5""dice-6""dices""diff""disc-2""disc-3""disc-album""disc""divide""dna-off""dna""dock""dog""dollar-sign""door-closed-locked""door-closed""door-open""drafting-compass""drama""dribbble""drill""drone""droplet-off""droplet""droplets""drum""drumstick""dumbbell""ear-off""ear""earth-lock""earth""globe-2""eclipse""egg-fried""egg-off""egg""ellipsis-vertical""more-vertical""ellipsis""more-horizontal""equal-approximately""equal-not""equal""eraser""ethernet-port""euro""ev-charger""expand""external-link""eye-closed""eye-off""eye""facebook""factory""fan""fast-forward""feather""fence""ferris-wheel""figma""file-archive""file-axis-3d""file-axis-3-d""file-badge""file-badge-2""file-box""file-braces-corner""file-json-2""file-braces""file-json""file-chart-column-increasing""file-bar-chart""file-chart-column""file-bar-chart-2""file-chart-line""file-line-chart""file-chart-pie""file-pie-chart""file-check-corner""file-check-2""file-check""file-clock""file-code-corner""file-code-2""file-code""file-cog""file-cog-2""file-diff""file-digit""file-down""file-exclamation-point""file-warning""file-headphone""file-audio""file-audio-2""file-heart""file-image""file-input""file-key""file-key-2""file-lock""file-lock-2""file-minus-corner""file-minus-2""file-minus""file-music""file-output""file-pen-line""file-signature""file-pen""file-edit""file-play""file-video""file-plus-corner""file-plus-2""file-plus""file-question-mark""file-question""file-scan""file-search-corner""file-search-2""file-search""file-signal""file-volume-2""file-sliders""file-spreadsheet""file-stack""file-symlink""file-terminal""file-text""file-type-corner""file-type-2""file-type""file-up""file-user""file-video-camera""file-video-2""file-volume""file-x-corner""file-x-2""file-x""film""fingerprint-pattern""fingerprint""fire-extinguisher""fish-off""fish-symbol""fish""fishing-hook""flag-off""flag-triangle-left""flag-triangle-right""flag""flame-kindling""flame""flashlight-off""flashlight""flask-conical-off""flask-conical""flask-round""flip-horizontal-2""flip-horizontal""flip-vertical-2""flip-vertical""flower-2""flower""fold-horizontal""fold-vertical""folder-archive""folder-check""folder-clock""folder-closed""folder-code""folder-cog""folder-cog-2""folder-dot""folder-down""folder-git-2""folder-git""folder-heart""folder-input""folder-kanban""folder-key""folder-lock""folder-minus""folder-open-dot""folder-open""folder-output""folder-pen""folder-edit""folder-plus""folder-root""folder-search-2""folder-search""folder-symlink""folder-sync""folder-tree""folder-up""folder-x""folder""folders""footprints""forklift""forward""frame""framer""frown""fuel""fullscreen""funnel-plus""funnel-x""filter-x""funnel""gallery-horizontal-end""gallery-horizontal""gallery-thumbnails""gallery-vertical-end""gallery-vertical""gamepad-2""gamepad-directional""gamepad""gauge""gavel""gem""georgian-lari""gift""git-branch-minus""git-branch-plus""git-branch""git-commit-horizontal""git-commit""git-commit-vertical""git-compare-arrows""git-compare""git-fork""git-graph""git-merge""git-pull-request-arrow""git-pull-request-closed""git-pull-request-create-arrow""git-pull-request-create""git-pull-request-draft""git-pull-request""github""gitlab""glass-water""glasses""globe-lock""globe""goal""gpu""graduation-cap""grape""grid-2x2-check""grid-2-x-2-check""grid-2x2-plus""grid-2-x-2-plus""grid-2x2-x""grid-2-x-2-x""grid-2x2""grid-2-x-2""grid-3x2""grid-3x3""grid-3-x-3""grip-horizontal""grip-vertical""grip""group""guitar""ham""hamburger""hammer""hand-coins""hand-fist""hand-grab""grab""hand-heart""hand-helping""helping-hand""hand-metal""hand-platter""hand""handbag""handshake""hard-drive-download""hard-drive-upload""hard-drive""hard-hat""hash""hat-glasses""haze""hd""hdmi-port""heading-1""heading-2""heading-3""heading-4""heading-5""heading-6""heading""headphone-off""headphones""headset""heart-crack""heart-handshake""heart-minus""heart-off""heart-plus""heart-pulse""heart""heater""helicopter""hexagon""highlighter""history""hop-off""hop""hospital""hotel""hourglass""house-heart""house-plug""house-plus""house-wifi""house""home""ice-cream-bowl""ice-cream-2""ice-cream-cone""ice-cream""id-card-lanyard""id-card""image-down""image-minus""image-off""image-play""image-plus""image-up""image-upscale""images""import""inbox""indian-rupee""infinity""info""inspection-panel""instagram""italic""iteration-ccw""iteration-cw""japanese-yen""joystick""kanban""kayak""key-round""key-square""key""keyboard-music""keyboard-off""keyboard""lamp-ceiling""lamp-desk""lamp-floor""lamp-wall-down""lamp-wall-up""lamp""land-plot""landmark""languages""laptop-minimal-check""laptop-minimal""laptop-2""laptop""lasso-select""lasso""laugh""layers-2""layers-plus""layers""layers-3""layout-dashboard""layout-grid""layout-list""layout-panel-left""layout-panel-top""layout-template""leaf""leafy-green""lectern""library-big""library""life-buoy""ligature""lightbulb-off""lightbulb""line-squiggle""link-2-off""link-2""linkedin""list-check""list-checks""list-chevrons-down-up""list-chevrons-up-down""list-collapse""list-end""list-filter-plus""list-filter""list-indent-decrease""outdent""indent-decrease""list-indent-increase""indent""indent-increase""list-minus""list-music""list-ordered""list-plus""list-restart""list-start""list-todo""list-tree""list-video""list-x""loader-circle""loader-2""loader-pinwheel""loader""locate-fixed""locate-off""locate""lock-keyhole-open""unlock-keyhole""lock-keyhole""lock-open""unlock""lock""log-in""log-out""logs""lollipop""luggage""magnet""mail-check""mail-minus""mail-open""mail-plus""mail-question-mark""mail-question""mail-search""mail-warning""mail-x""mail""mailbox""mails""map-minus""map-pin-check-inside""map-pin-check""map-pin-house""map-pin-minus-inside""map-pin-minus""map-pin-off""map-pin-pen""location-edit""map-pin-plus-inside""map-pin-plus""map-pin-x-inside""map-pin-x""map-pin""map-pinned""map-plus""mars-stroke""mars""martini""maximize-2""maximize""medal""megaphone-off""megaphone""meh""memory-stick""merge""message-circle-code""message-circle-dashed""message-circle-heart""message-circle-more""message-circle-off""message-circle-plus""message-circle-question-mark""message-circle-question""message-circle-reply""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-lock""message-square-more""message-square-off""message-square-plus""message-square-quote""message-square-reply""message-square-share""message-square-text""message-square-warning""message-square-x""message-square""messages-square""mic-off""mic-vocal""mic-2""mic""microchip""microscope""microwave""milestone""milk-off""milk""minimize-2""minimize""minus""monitor-check""monitor-cloud""monitor-cog""monitor-dot""monitor-down""monitor-off""monitor-pause""monitor-play""monitor-smartphone""monitor-speaker""monitor-stop""monitor-up""monitor-x""monitor""moon-star""moon""motorbike""mountain-snow""mountain""mouse-off""mouse-pointer-2-off""mouse-pointer-2""mouse-pointer-ban""mouse-pointer-click""mouse-pointer""mouse""move-3d""move-3-d""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""move""music-2""music-3""music-4""music""navigation-2-off""navigation-2""navigation-off""navigation""network""newspaper""nfc""non-binary""notebook-pen""notebook-tabs""notebook-text""notebook""notepad-text-dashed""notepad-text""nut-off""nut""octagon-alert""alert-octagon""octagon-minus""octagon-pause""pause-octagon""octagon-x""x-octagon""octagon""omega""orbit""origami""package-2""package-check""package-minus""package-open""package-plus""package-search""package-x""package""paint-bucket""paint-roller""paintbrush-vertical""paintbrush-2""paintbrush""palette""panda""panel-bottom-close""panel-bottom-dashed""panel-bottom-inactive""panel-bottom-open""panel-bottom""panel-left-close""sidebar-close""panel-left-dashed""panel-left-inactive""panel-left-open""sidebar-open""panel-left-right-dashed""panel-left""sidebar""panel-right-close""panel-right-dashed""panel-right-inactive""panel-right-open""panel-right""panel-top-bottom-dashed""panel-top-close""panel-top-dashed""panel-top-inactive""panel-top-open""panel-top""panels-left-bottom""panels-right-bottom""panels-top-left""layout""paperclip""parentheses""parking-meter""party-popper""pause""paw-print""pc-case""pen-line""edit-3""pen-off""pen-tool""pen""edit-2""pencil-line""pencil-off""pencil-ruler""pencil""pentagon""percent""person-standing""philippine-peso""phone-call""phone-forwarded""phone-incoming""phone-missed""phone-off""phone-outgoing""phone""pi""piano""pickaxe""picture-in-picture-2""picture-in-picture""piggy-bank""pilcrow-left""pilcrow-right""pilcrow""pill-bottle""pin-off""pin""pipette""pizza""plane-landing""plane-takeoff""plane""play""plug-2""plug-zap""plug-zap-2""plug""plus""pocket-knife""pocket""podcast""pointer-off""pointer""popcorn""popsicle""pound-sterling""power-off""power""presentation""printer-check""printer""projector""proportions""puzzle""pyramid""qr-code""quote""rabbit""radar""radiation""radical""radio-receiver""radio-tower""radio""radius""rail-symbol""rainbow""rat""receipt-cent""receipt-euro""receipt-indian-rupee""receipt-japanese-yen""receipt-pound-sterling""receipt-russian-ruble""receipt-swiss-franc""receipt-text""receipt-turkish-lira""receipt""rectangle-circle""rectangle-ellipsis""form-input""rectangle-goggles""rectangle-horizontal""rectangle-vertical""recycle""redo-2""redo-dot""redo""refresh-ccw-dot""refresh-ccw""refresh-cw-off""refresh-cw""refrigerator""regex""remove-formatting""repeat-1""repeat-2""replace-all""replace""reply-all""reply""rewind""ribbon""rocket""rocking-chair""roller-coaster""rose""rotate-3d""rotate-3-d""rotate-ccw-key""rotate-ccw-square""rotate-ccw""rotate-cw-square""rotate-cw""route-off""route""router""rows-2""rows-3""panels-top-bottom""rows-4""rss""ruler-dimension-line""ruler""russian-ruble""sailboat""salad""sandwich""satellite-dish""satellite""saudi-riyal""save-all""save-off""save""scale-3d""scale-3-d""scaling""scan-barcode""scan-eye""scan-face""scan-heart""scan-line""scan-qr-code""scan-search""scan-text""scan""school""scissors-line-dashed""scissors""scooter""screen-share-off""screen-share""scroll-text""search-alert""search-check""search-code""search-slash""search-x""send-horizontal""send-horizonal""send-to-back""send""separator-horizontal""separator-vertical""server-cog""server-crash""server-off""server""settings-2""settings""shapes""share-2""share""sheet""shell""shield-alert""shield-ban""shield-check""shield-ellipsis""shield-half""shield-minus""shield-off""shield-plus""shield-question-mark""shield-question""shield-user""shield-x""shield-close""shield""ship-wheel""ship""shirt""shopping-bag""shopping-basket""shopping-cart""shovel""shower-head""shredder""shrimp""shrink""shrub""shuffle""sigma""signal-high""signal-low""signal-medium""signal-zero""signal""signature""signpost-big""signpost""siren""skip-back""skip-forward""skull""slack""slash""slice""sliders-horizontal""sliders-vertical""sliders""smartphone-charging""smartphone-nfc""smartphone""smile-plus""smile""snail""snowflake""soap-dispenser-droplet""sofa""solar-panel""soup""spade""sparkle""sparkles""stars""speaker""speech""spell-check-2""spell-check""spline-pointer""spline""split""spool""spotlight""spray-can""sprout""square-activity""activity-square""square-arrow-down-left""arrow-down-left-square""square-arrow-down-right""arrow-down-right-square""square-arrow-down""arrow-down-square""square-arrow-left""arrow-left-square""square-arrow-out-down-left""arrow-down-left-from-square""square-arrow-out-down-right""arrow-down-right-from-square""square-arrow-out-up-left""arrow-up-left-from-square""square-arrow-out-up-right""arrow-up-right-from-square""square-arrow-right""arrow-right-square""square-arrow-up-left""arrow-up-left-square""square-arrow-up-right""arrow-up-right-square""square-arrow-up""arrow-up-square""square-asterisk""asterisk-square""square-bottom-dashed-scissors""scissors-square-dashed-bottom""square-chart-gantt""gantt-chart-square""square-gantt-chart""square-check-big""check-square""square-check""check-square-2""square-chevron-down""chevron-down-square""square-chevron-left""chevron-left-square""square-chevron-right""chevron-right-square""square-chevron-up""chevron-up-square""square-code""code-square""square-dashed-bottom-code""square-dashed-bottom""square-dashed-kanban""kanban-square-dashed""square-dashed-mouse-pointer""mouse-pointer-square-dashed""square-dashed-top-solid""square-dashed""box-select""square-divide""divide-square""square-dot""dot-square""square-equal""equal-square""square-function""function-square""square-kanban""kanban-square""square-library""library-square""square-m""m-square""square-menu""menu-square""square-minus""minus-square""square-mouse-pointer""inspect""square-parking-off""parking-square-off""square-parking""parking-square""square-pause""square-pen""pen-box""edit""pen-square""square-percent""percent-square""square-pi""pi-square""square-pilcrow""pilcrow-square""square-play""play-square""square-plus""plus-square""square-power""power-square""square-radical""square-round-corner""square-scissors""scissors-square""square-sigma""sigma-square""square-slash""slash-square""square-split-horizontal""split-square-horizontal""square-split-vertical""split-square-vertical""square-square""square-stack""square-star""square-stop""square-terminal""terminal-square""square-user-round""user-square-2""square-user""user-square""square-x""x-square""squares-exclude""squares-intersect""squares-subtract""squares-unite""squircle-dashed""squircle""squirrel""stamp""star-half""star-off""star""step-back""step-forward""stethoscope""sticker""sticky-note""stone""store""stretch-horizontal""stretch-vertical""strikethrough""subscript""sun-dim""sun-medium""sun-moon""sun-snow""sun""sunrise""sunset""superscript""swatch-book""swiss-franc""switch-camera""sword""swords""syringe""table-2""table-cells-merge""table-cells-split""table-columns-split""table-of-contents""table-properties""table-rows-split""tablet-smartphone""tablet""tablets""tag""tags""tally-1""tally-2""tally-3""tally-4""tally-5""tangent""telescope""tent-tree""tent""terminal""test-tube-diagonal""test-tube-2""test-tube""test-tubes""text-align-center""align-center""text-align-end""align-right""text-align-justify""align-justify""text-align-start""align-left""text-cursor-input""text-cursor""text-initial""letter-text""text-quote""text-search""text-select""text-selection""text-wrap""wrap-text""theater""thermometer-snowflake""thermometer-sun""thermometer""thumbs-down""thumbs-up""ticket-check""ticket-minus""ticket-percent""ticket-plus""ticket-slash""ticket-x""ticket""tickets-plane""tickets""timer-off""timer-reset""timer""toggle-left""toggle-right""toilet""tool-case""toolbox""tornado""torus""touchpad-off""touchpad""tower-control""toy-brick""tractor""traffic-cone""train-front-tunnel""train-front""train-track""tram-front""train""transgender""trash-2""trash""tree-deciduous""tree-palm""palmtree""tree-pine""trees""trello""trending-down""trending-up-down""trending-up""triangle-alert""alert-triangle""triangle-dashed""triangle-right""trophy""truck-electric""truck""turkish-lira""turntable""turtle""tv-minimal-play""tv-minimal""tv-2""tv""twitch""twitter""type-outline""umbrella-off""umbrella""undo-2""undo-dot""undo""unfold-horizontal""unfold-vertical""ungroup""university""school-2""unlink-2""unlink""unplug""upload""usb""user-check""user-cog""user-lock""user-minus""user-pen""user-plus""user-round-check""user-check-2""user-round-cog""user-cog-2""user-round-minus""user-minus-2""user-round-pen""user-round-plus""user-plus-2""user-round-search""user-round-x""user-x-2""user-round""user-2""user-search""user-star""user-x""user""users-round""users-2""users""utensils-crossed""fork-knife-crossed""utensils""fork-knife""utility-pole""van""variable""vault""vector-square""vegan""venetian-mask""venus-and-mars""venus""vibrate-off""vibrate""video-off""videotape""voicemail""volleyball""volume-1""volume-2""volume-off""volume-x""volume""vote""wallet-cards""wallet-minimal""wallet-2""wallet""wallpaper""wand-sparkles""wand-2""wand""warehouse""washing-machine""watch""waves-arrow-down""waves-arrow-up""waves-ladder""waves""waypoints""webcam""webhook-off""webhook""weight-tilde""weight""wheat-off""wheat""whole-word""wifi-cog""wifi-high""wifi-low""wifi-off""wifi-pen""wifi-sync""wifi-zero""wifi""wind-arrow-down""wind""wine-off""wine""workflow""worm""wrench""youtube""zap-off""zap""zoom-in""zoom-out" | 'circle' | Field name used by forms and Formik bindings.Source |
strokeWidth | string | number | 1 | This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017. **Syntax**: `<length-percentage> | <number>` **Initial value**: `1px` | Chrome | Firefox | Safari | Edge | IE | | :----: | :-----: | :----: | :-----: | :-: | | **1** | **1.5** | **4** | **≤15** | No |Source |
size | string | number | — | Size preset for the component.Source |
fallback | View typestring | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | — | See the type and source declaration for this property.Source |
Common inherited styling props (7)
Scroll horizontally to see every column.
| Prop | Type | Default | Description |
|---|---|---|---|
onClick | any | — | Called when the user activates the component. |
media | Record<string, CssProps> | — | See the type and source declaration for this property. |
as | keyof JSX.IntrinsicElements"symbol""object""slot""style""title""pattern""form""animate""clipPath""filter""marker""mask""a""abbr""address""area""article""aside""audio""b""base""bdi""bdo""big""blockquote""body""br""button""canvas""caption""center""cite""code""col""colgroup""data""datalist""dd""del""details""dfn""dialog""div""dl""dt""em""embed""fieldset""figcaption""figure""footer""h1""h2""h3""h4""h5""h6""head""header""hgroup""hr""html""i""iframe""img""input""ins""kbd""keygen""label""legend""li""link""main""map""mark""menu""menuitem""meta""meter""nav""noindex""noscript""ol""optgroup""option""output""p""param""picture""pre""progress""q""rp""rt""ruby""s""samp""search""script""section""select""small""source""span""strong""sub""summary""sup""table""template""tbody""td""textarea""tfoot""th""thead""time""tr""track""u""ul""var""video""wbr""webview""svg""animateMotion""animateTransform""circle""defs""desc""ellipse""feBlend""feColorMatrix""feComponentTransfer""feComposite""feConvolveMatrix""feDiffuseLighting""feDisplacementMap""feDistantLight""feDropShadow""feFlood""feFuncA""feFuncB""feFuncG""feFuncR""feGaussianBlur""feImage""feMerge""feMergeNode""feMorphology""feOffset""fePointLight""feSpecularLighting""feSpotLight""feTile""feTurbulence""foreignObject""g""image""line""linearGradient""metadata""mpath""path""polygon""polyline""radialGradient""rect""set""stop""switch""text""textPath""tspan""use""view" | — | See the type and source declaration for this property. |
themeMode | "light" | "dark""light""dark" | — | See the type and source declaration for this property. |
_hover | string | CssProps | — | See the type and source declaration for this property. |
_active | string | CssProps | — | See the type and source declaration for this property. |
_focus | string | CssProps | — | See the type and source declaration for this property. |
For shared layout, color, and responsive properties, read Styling & composition and Responsive layouts. Additional native element attributes depend on the target platform.
Usage guidance
- Give controls a visible label or an accessible name, and verify keyboard interaction. See Accessibility.
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check React Native setup for platform requirements and differences.