# Icon

Lucide icon, displayed statically or as a button without a caption.

URL: https://webrad.atentor.com/docs/icon
Updated: 2026-11-07

WebIcon · Standard · Visual · 8 events

## Quick start

Add **Icon1** in the Designer. Use the example in a page method.

```ts
Icon1.icon = 'settings';
Icon1.mode = 'button';
Icon1.accessibleLabel = 'Settings';
Icon1.strokeWidth = 2;
Icon1.onClick = () => { Message('Open settings'); };
// Icon1.click();
```

The icon mode is static. The button mode enables clicks and keyboard input; set accessibleLabel to identify the action.

- Choose the icon in the Inspector’s Lucide picker; the name is also typed in Monaco.
- **Mode = icon** displays the image. **Mode = button** supports clicks, focus, Enter, and Space.
- Configure accessibleLabel, strokeWidth, dimensions, and color. The component does not display a caption.
- Link OnClick in Interaction to execute the action.

## Inspector properties

Component options and defaults. Fields without runtime access are configured in the Inspector.

| Property / source | Type and options | Default | Runtime access |
| --- | --- | --- | --- |
| `name` — Name · Identity | `string` | `—` | name |
| `x` — Left · Size & position | `number` | `0` | x |
| `y` — Top · Size & position | `number` | `0` | y |
| `width` — Width · Size & position | `number` | `32` | width |
| `height` — Height · Size & position | `number` | `32` | height |
| `itemWidth` — Responsive width · Responsive size — Fit content grows the item to its widest rendered child and preserves child intrinsic widths; minimum and maximum width remain limits. | `enum` — `fixed` `stretch` `fit-content` | `"fixed"` | Inspector / configuration |
| `itemHeight` — Responsive height · Responsive size — Fit content grows the item to its lowest rendered child and preserves child intrinsic heights; minimum and maximum height remain limits. | `enum` — `fixed` `stretch` `fit-content` | `"fixed"` | Inspector / configuration |
| `itemMinWidth` — Minimum width · Responsive size | `number` | `0` | Inspector / configuration |
| `itemMaxWidth` — Maximum width · Responsive size | `number` | `null` | Inspector / configuration |
| `itemMinHeight` — Minimum height · Responsive size | `number` | `0` | Inspector / configuration |
| `itemMaxHeight` — Maximum height · Responsive size | `number` | `null` | Inspector / configuration |
| `itemGrow` — Grow · Responsive size | `number` | `0` | Inspector / configuration |
| `itemShrink` — Shrink · Responsive size — Allows fixed and stretch flow items to yield space. Fit-content keeps its intrinsic size so its children are not compressed. | `boolean` | `true` | Inspector / configuration |
| `itemAlignSelf` — Item alignment · Responsive size — Cross-axis alignment for this item in a row or column. Auto inherits the parent alignment; responsive cross-axis stretch retains its sizing behavior. | `enum` — `auto` `start` `center` `end` `stretch` | `"auto"` | Inspector / configuration |
| `itemHorizontalAnchor` — Horizontal anchor · Anchors & offsets | `enum` — `start` `center` `end` `stretch` | `"start"` | Inspector / configuration |
| `itemVerticalAnchor` — Vertical anchor · Anchors & offsets | `enum` — `start` `center` `end` `stretch` | `"start"` | Inspector / configuration |
| `itemLeft` — Left inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `itemRight` — Right inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `itemTop` — Top inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `itemBottom` — Bottom inset · Anchors & offsets | `number` | `0` | Inspector / configuration |
| `margin` — Margin · Spacing — Outer spacing on all four sides, in pixels. Row and column layouts include this spacing between components. | `number` | `0` | margin |
| `marginTop` — Margin top · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginTop |
| `marginRight` — Margin right · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginRight |
| `marginBottom` — Margin bottom · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginBottom |
| `marginLeft` — Margin left · Spacing — Outer spacing on this side, in pixels. Overrides the shared Margin value. | `number` | `0` — Derived from saved properties | marginLeft |
| `visible` — Visible · Behavior | `boolean` | `true` | visible |
| `collapseWhenHidden` — Collapse when hidden · Behavior — Removes the component from the layout while it is not visible. | `boolean` | `true` | collapseWhenHidden |
| `enabled` — Enabled · Behavior | `boolean` | `true` | enabled |
| `tabIndex` — TabIndex · Behavior | `number` | `0` | tabIndex |
| `icon` — Icon · Appearance | `icon`1903 options — `a-arrow-down` `a-arrow-up` `a-large-small` `accessibility` `activity` `ad` `air-vent` `airplay` `alarm-clock-check` `alarm-clock-minus` `alarm-clock-off` `alarm-clock-plus` `alarm-clock` `alarm-smoke` `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` `angle` `antenna` `anvil` `aperture` `app-window-mac` `app-window` `apple` `archive-restore` `archive-x` `archive` `armchair` `armenian-dram` `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-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` `arrow-down-z-a` `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-1-0` `arrow-up-a-z` `arrow-up-down` `arrow-up-from-dot` `arrow-up-from-line` `arrow-up-left` `arrow-up-narrow-wide` `arrow-up-right` `arrow-up-to-line` `arrow-up-wide-narrow` `arrow-up-z-a` `arrow-up` `arrows-up-from-line` `asterisk` `astroid` `at-sign` `atom` `audio-lines-off` `audio-lines-x` `audio-lines` `audio-waveform` `avocado` `award` `axe` `axis-3d` `baby` `backpack` `bacon` `badge-alert` `badge-cent` `badge-check` `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-russian-ruble` `badge-swiss-franc` `badge-turkish-lira` `badge-x` `badge` `baggage-claim` `balloon` `ban` `banana` `bandage` `bangladeshi-taka` `banknote-arrow-down` `banknote-arrow-up` `banknote-check` `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-off` `beef` `beer-off` `beer` `belarusian-ruble` `bell-check` `bell-dot` `bell-electric` `bell-minus` `bell-off` `bell-plus` `bell-ring` `bell` `between-horizontal-end` `between-horizontal-start` `between-vertical-end` `between-vertical-start` `biceps-flexed` `bike` `binary` `binoculars` `biohazard` `bird` `birdhouse` `bitcoin` `blend` `blender` `blinds` `blocks` `bluetooth-connected` `bluetooth-off` `bluetooth-searching` `bluetooth` `bold` `bolt` `bomb` `bone-fracture` `bone` `book-a` `book-alert` `book-audio` `book-bookmark` `book-check` `book-copy` `book-dashed` `book-down` `book-headphones` `book-heart` `book-image` `book-key` `book-lock` `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-off` `bookmark-plus` `bookmark-x` `bookmark` `boom-box` `bot-message-square` `bot-off` `bot` `bottle-wine` `bow-arrow` `box` `boxes` `braces` `brackets` `brain-circuit` `brain-cog` `brain-off` `brain` `brick-wall-fire` `brick-wall-shield` `brick-wall` `bridge` `briefcase-business` `briefcase-conveyor-belt` `briefcase-medical` `briefcase-plus` `briefcase` `bring-to-front` `broccoli` `broom-sparkles` `broom` `brush-cleaning` `brush` `bubbles` `bug-off` `bug-play` `bug` `building-complex-plus` `building-complex` `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-chevrons-left` `calendar-chevrons-right` `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` `can-soda` `can` `candy-cane` `candy-off` `candy` `cannabis-off` `cannabis` `captions-off` `captions` `car-battery` `car-front` `car-taxi-front` `car` `caravan` `card-sim` `carrot` `carton-off` `carton` `case-lower` `case-sensitive` `case-upper` `cassette-tape` `cast` `castle` `cat` `cctv-off` `cctv` `certificate` `chart-area` `chart-bar-big` `chart-bar-decreasing` `chart-bar-increasing` `chart-bar-stacked` `chart-bar` `chart-candlestick` `chart-column-big` `chart-column-decreasing` `chart-column-increasing` `chart-column-stacked` `chart-column` `chart-gantt` `chart-line` `chart-network` `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-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` `church` `cigarette-off` `cigarette` `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-chevrons-down` `circle-chevrons-left` `circle-chevrons-right` `circle-chevrons-up` `circle-dashed-check` `circle-dashed` `circle-divide` `circle-dollar-sign` `circle-dot-dashed` `circle-dot` `circle-ellipsis` `circle-equal` `circle-euro` `circle-fading-arrow-up` `circle-fading-play` `circle-fading-plus` `circle-gauge` `circle-minus` `circle-off` `circle-parking-off` `circle-parking` `circle-pause` `circle-percent` `circle-pile` `circle-play` `circle-plus` `circle-pound-sterling` `circle-power` `circle-question-mark` `circle-slash-2` `circle-slash` `circle-small` `circle-star` `circle-stop` `circle-user-round` `circle-user` `circle-x` `circle` `circuit-board` `citrus` `clapperboard` `clef-alto` `clef-bass` `clef-treble` `clipboard-check` `clipboard-clock` `clipboard-copy` `clipboard-list` `clipboard-minus` `clipboard-paste` `clipboard-pen-line` `clipboard-pen` `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-left` `clock-arrow-right` `clock-arrow-up` `clock-check` `clock-fading` `clock-plus` `clock` `closed-caption` `cloud-alert` `cloud-backup` `cloud-check` `cloud-cog` `cloud-download` `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` `cloud` `cloudy` `clover` `club` `code-xml` `code` `coffee` `cog` `coins` `columns-2` `columns-3-cog` `columns-3` `columns-4` `combine` `command` `compass` `component` `computer` `concierge-bell` `cone` `construction` `contact-round` `contact` `container` `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-ai` `cpu` `creative-commons` `credit-card-check` `credit-card-minus` `credit-card-plus` `credit-card-reader` `credit-card-x` `credit-card` `croissant` `crop` `cross` `crosshair` `crown` `cuboid` `cup-soda` `cupcake` `currency` `cylinder` `dam` `database-arrow-down` `database-arrow-up` `database-backup` `database-check` `database-minus` `database-plus` `database-search` `database-x` `database-zap` `database` `decimals-arrow-left` `decimals-arrow-right` `delete` `dessert` `diameter` `diamond-minus` `diamond-percent` `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` `dome` `donut` `door-closed-cog` `door-closed-locked` `door-closed-package` `door-closed` `door-open` `door-stairwell` `dot` `download` `drafting-compass` `drama` `drill` `drone` `droplet-off` `droplet` `droplets` `drum` `drumstick` `dumbbell` `ear-off` `ear` `earth-lock` `earth` `eclipse` `egg-fried` `egg-off` `egg` `eighth-note` `eighth-notes` `eject` `ellipse` `ellipsis-vertical` `ellipsis` `engine` `equal-approximately-not` `equal-approximately` `equal-not` `equal` `eraser` `ethernet-port` `euro` `ev-charger` `expand` `external-link` `eye-closed` `eye-dashed` `eye-off` `eye` `face-angry` `face-expressionless` `face-grinning` `face-neutral` `face-slightly-frowning` `face-slightly-smiling-plus` `face-slightly-smiling` `factory` `fan` `fast-forward` `faucet` `feather` `fence` `ferris-wheel` `file-archive` `file-axis-3d` `file-badge` `file-box` `file-braces-corner` `file-braces` `file-chart-column-increasing` `file-chart-column` `file-chart-line` `file-chart-pie` `file-check-corner` `file-check` `file-clock` `file-code-corner` `file-code` `file-cog` `file-diff` `file-digit` `file-down` `file-exclamation-point` `file-headphone` `file-heart` `file-image` `file-input` `file-key` `file-lock` `file-minus-corner` `file-minus` `file-music` `file-output` `file-pen-line` `file-pen` `file-play` `file-plus-corner` `file-plus` `file-question-mark` `file-scan` `file-search-corner` `file-search` `file-signal` `file-sliders` `file-spreadsheet` `file-stack` `file-symlink` `file-terminal` `file-text` `file-type-corner` `file-type` `file-up` `file-user` `file-video-camera` `file-volume` `file-x-corner` `file-x` `file` `files` `film` `fingerprint-pattern` `fire-extinguisher` `fish-off` `fish-symbol` `fish` `fishing-hook` `fishing-rod` `flag-off` `flag-triangle-left` `flag-triangle-right` `flag` `flame-kindling` `flame` `flashlight-off` `flashlight` `flask-conical-off` `flask-conical` `flask-round` `flower-2` `flower` `focus` `fold-horizontal` `fold-vertical` `folder-archive` `folder-bookmark` `folder-check` `folder-clock` `folder-closed` `folder-code` `folder-cog` `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-plus` `folder-root` `folder-search-2` `folder-search` `folder-symlink` `folder-sync` `folder-tree` `folder-up` `folder-user` `folder-users` `folder-x` `folder` `folders` `footprints` `forklift` `form` `forward` `frame` `fuel` `fullscreen` `funnel-plus` `funnel-x` `funnel` `galaxy` `gallery-horizontal-end` `gallery-horizontal` `gallery-thumbnails` `gallery-vertical-end` `gallery-vertical` `gamepad-2` `gamepad-directional` `gamepad` `gap-horizontal` `gap-vertical` `gauge` `gavel` `gem` `georgian-lari` `germ-off` `germ` `ghost` `gift` `git-branch-minus` `git-branch-plus` `git-branch` `git-commit-horizontal` `git-commit-vertical` `git-compare-arrows` `git-compare` `git-fork` `git-graph` `git-merge-conflict` `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` `glass-water` `glasses` `globe-check` `globe-code` `globe-lock` `globe-off` `globe-x` `globe` `goal` `gpu` `graduation-cap` `grape` `graph-hub` `graph-star` `grid-2x2-check` `grid-2x2-plus` `grid-2x2-x` `grid-2x2` `grid-3x2` `grid-3x3` `grip-horizontal` `grip-vertical` `grip` `groceries` `group` `guitar-electric` `guitar` `half-note` `ham` `hamburger` `hammer` `hand-coins` `hand-fist` `hand-grab` `hand-heart` `hand-helping` `hand-metal` `hand-platter` `hand` `handbag` `handle-bottom-right` `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-x` `heart` `heater` `helicopter` `hexagon` `highlighter` `hiking-stick` `hop-off` `hop` `hospital` `hotel` `hourglass-cog` `hourglass` `house-cog` `house-heart` `house-plug` `house-plus` `house-wifi` `house` `houses` `ice-cream-bowl` `ice-cream-cone` `id-card-lanyard` `id-card` `image-down` `image-minus` `image-off` `image-play` `image-plus` `image-up` `image-upscale` `image` `images` `import` `inbox` `indian-rupee` `infinity` `info` `inspection-panel` `italic` `iteration-ccw` `iteration-cw` `iv-bag` `japanese-yen` `joystick` `kanban` `kayak` `kazakh-tenge` `key-round` `key-square` `key` `keyboard-music` `keyboard-off` `keyboard` `lambda` `lamp-ceiling` `lamp-desk` `lamp-floor` `lamp-wall-down` `lamp-wall-up` `lamp` `land-plot` `landmark` `languages` `laptop-minimal-check` `laptop-minimal` `laptop` `lasso-select` `lasso` `layer-arrow-down` `layer-arrow-up` `layers-2` `layers-arrow-down` `layers-arrow-up` `layers-minus` `layers-plus` `layers` `layout-arrow-down` `layout-arrow-right` `layout-dashboard` `layout-freeform` `layout-grid-circles` `layout-grid` `layout-list` `layout-panel-left` `layout-panel-top` `layout-template` `leaf` `leafy-green` `lectern` `lens-concave` `lens-convex` `lens` `letter-spacing` `letters` `library-big` `library` `life-buoy` `ligature` `lightbulb-off` `lightbulb` `lighthouse` `line-dot-bottom-vertical` `line-dot-left-horizontal` `line-dot-right-horizontal` `line-dot-top-vertical` `line-height` `line-squiggle` `line-style` `link-2-off` `link-2` `link` `list-check` `list-checks` `list-chevrons-down-up` `list-chevrons-up-down` `list-clock` `list-collapse` `list-end` `list-filter-plus` `list-filter` `list-indent-decrease` `list-indent-increase` `list-minus` `list-music` `list-ordered` `list-plus` `list-restart` `list-sort-ascending` `list-sort-descending` `list-start` `list-todo` `list-tree` `list-video` `list-x` `list` `loader-circle` `loader-pinwheel` `loader` `locate-fixed` `locate-off` `locate` `lock-keyhole-open` `lock-keyhole` `lock-open` `lock` `log-in` `log-out` `logs` `lollipop` `luggage` `magnet` `mail-badge` `mail-check` `mail-clock` `mail-dot` `mail-minus` `mail-open` `mail-pen` `mail-plus` `mail-question-mark` `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` `map-pin-plus-inside` `map-pin-plus` `map-pin-search` `map-pin-x-inside` `map-pin-x` `map-pin` `map-pinned` `map-plus` `map` `mars-stroke` `mars` `martini` `maximize-2` `maximize` `medal` `megaphone-off` `megaphone` `memory-stick` `menu` `merge` `message-circle-check` `message-circle-code` `message-circle-dashed-check` `message-circle-dashed` `message-circle-heart` `message-circle-more` `message-circle-off` `message-circle-plus` `message-circle-question-mark` `message-circle-reply` `message-circle-text` `message-circle-warning` `message-circle-x` `message-circle` `message-square-check` `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-circle` `messages-square` `metronome` `mic-audio-lines` `mic-off` `mic-signal` `mic-vocal` `mic` `microchip` `microscope` `microwave` `midi-port` `milestone` `milk-off` `milk` `minimize-2` `minimize` `minus` `mirror-rectangular` `mirror-round` `monitor-check` `monitor-cloud` `monitor-cog` `monitor-dot` `monitor-down` `monitor-off` `monitor-pause` `monitor-pc` `monitor-play` `monitor-smartphone` `monitor-speaker` `monitor-stop` `monitor-up` `monitor-x` `monitor` `moon-star` `moon` `mop-sparkles` `mop` `mosque` `motorbike` `mountain-snow` `mountain` `mouse-left` `mouse-off` `mouse-pointer-2-off` `mouse-pointer-2` `mouse-pointer-ban` `mouse-pointer-click` `mouse-pointer` `mouse-right` `mouse` `mouth-off` `mouth` `move-3d` `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` `navigation-2-off` `navigation-2` `navigation-off` `navigation` `nepali-rupee` `network` `newspaper` `nfc` `non-binary` `notebook-dot` `notebook-pen` `notebook-tabs` `notebook-text` `notebook` `notepad-text-dashed` `notepad-text` `nut-off` `nut` `octagon-alert` `octagon-minus` `octagon-pause` `octagon-x` `octagon` `omega` `option` `orbit` `origami` `package-2` `package-check` `package-minus` `package-open` `package-plus` `package-search` `package-x` `package` `paint-bucket` `paint-roller` `paintbrush-vertical` `paintbrush` `palette` `panda` `panel-bottom-close` `panel-bottom-dashed` `panel-bottom-open` `panel-bottom` `panel-left-close` `panel-left-dashed` `panel-left-open` `panel-left-right-dashed` `panel-left` `panel-right-close` `panel-right-dashed` `panel-right-open` `panel-right` `panel-top-bottom-dashed` `panel-top-close` `panel-top-dashed` `panel-top-open` `panel-top` `panels-left-bottom` `panels-right-bottom` `panels-top-left` `paper-bag` `paperclip` `parasol` `parentheses` `park` `parking-meter` `party-popper` `pause` `paw-print` `pc-case` `pen-line` `pen-off` `pen-tool` `pen` `pencil-line` `pencil-off` `pencil-ruler` `pencil-sparkles` `pencil` `pentagon` `percent` `perfume-bottle` `person-standing` `phi` `philippine-peso` `phone-call` `phone-forwarded` `phone-incoming` `phone-log` `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` `pill` `pin-off` `pin` `pipette` `pizza` `plane-landing` `plane-takeoff` `plane` `plant-pot` `play-off` `play` `playing-card` `playing-cards-fan` `playing-cards` `plug-2` `plug-zap` `plug` `plus` `pocket-knife` `podium` `pointer-off` `pointer` `popcorn` `popsicle` `pound-sterling` `power-off` `power` `presentation` `printer-3d` `printer-check` `printer-x` `printer` `projector` `proportions` `puzzle` `pyramid` `qr-code` `quote` `rabbit` `radar` `radiation` `radical` `radio-off` `radio-receiver` `radio-tower` `radio` `radius` `rainbow` `rat` `ratio` `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` `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` `repeat-off` `repeat` `replace-all` `replace` `reply-all` `reply` `rewind` `ribbon` `road` `robot-arm` `robot-vacuum` `rocket` `rocking-chair` `roller-coaster` `rose` `rotate-3d` `rotate-ccw-clock` `rotate-ccw-key` `rotate-ccw-square` `rotate-ccw` `rotate-cw-clock` `rotate-cw-fading-clock` `rotate-cw-square` `rotate-cw` `route-off` `route` `router` `rows-2` `rows-3` `rows-4` `rss` `rugby-ball` `ruler-dimension-line` `ruler` `russian-ruble` `sailboat` `salad` `sandwich` `satellite-dish` `satellite` `saudi-riyal` `save-all` `save-check` `save-off` `save-pen` `save-plus` `save` `scale-3d` `scale` `scaling` `scan-barcode` `scan-box` `scan-eye` `scan-face` `scan-heart` `scan-line` `scan-qr-code` `scan-search` `scan-square` `scan-text` `scan` `school` `scissors-line-dashed` `scissors` `scooter` `scratch-blocks` `screen-share-off` `screen-share` `screw` `scroll-text` `scroll` `search-alert` `search-check` `search-code` `search-slash` `search-x` `search` `section` `send-horizontal` `send-to-back` `send` `separator-horizontal` `separator-vertical` `server-cog` `server-crash` `server-nas` `server-off` `server-plus` `server` `settings-2` `settings` `shapes` `share-2` `share` `sheet` `shell` `shelving-unit` `shield-alert` `shield-ban` `shield-check` `shield-cog-corner` `shield-cog` `shield-ellipsis` `shield-half` `shield-house` `shield-keyhole` `shield-lock` `shield-minus` `shield-off` `shield-plus` `shield-question-mark` `shield-user` `shield-x` `shield` `ship-cargo` `ship-wheel` `ship` `shirt` `shopping-bag` `shopping-basket` `shopping-cart-minus` `shopping-cart-plus` `shopping-cart` `shovel` `shower-head` `shredder` `shrimp-off` `shrimp` `shrink` `shrub` `shuffle` `sigma` `signal-high` `signal-low` `signal-medium` `signal-zero` `signal` `signature` `signpost-big` `signpost` `siren` `sixteenth-notes` `skip-back` `skip-forward` `skull` `slash` `slice` `sliders-horizontal` `sliders-vertical` `smartphone-charging` `smartphone-nfc` `smartphone-user-round` `smartphone` `snail` `snowflake` `soap-dispenser-droplet` `sofa` `solar-panel` `soup` `space` `spade` `sparkle` `sparkles` `speaker` `speech` `spell-check-2` `spell-check` `spline-pointer` `spline` `split` `spool` `sport-shoe` `spotlight` `spray-can` `sprout` `square-activity` `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-enter` `square-arrow-right-exit` `square-arrow-right` `square-arrow-up-left` `square-arrow-up-right` `square-arrow-up` `square-asterisk` `square-bookmark` `square-bottom-dashed-scissors` `square-centerline-dashed-horizontal` `square-centerline-dashed-vertical` `square-chart-gantt` `square-check-big` `square-check` `square-chevron-down` `square-chevron-left` `square-chevron-right` `square-chevron-up` `square-code` `square-dashed-bottom-code` `square-dashed-bottom` `square-dashed-kanban` `square-dashed-mouse-pointer` `square-dashed-plus` `square-dashed-text` `square-dashed-top-solid` `square-dashed-x-corner` `square-dashed-x` `square-dashed` `square-dimensions` `square-divide` `square-dot` `square-equal` `square-exclamation-point` `square-function` `square-kanban` `square-library` `square-m` `square-menu` `square-minus` `square-mouse-pointer` `square-off` `square-parking-off` `square-parking` `square-pause` `square-pen` `square-percent` `square-pi` `square-pilcrow` `square-play` `square-plus` `square-power` `square-radical` `square-round-corner` `square-scissors` `square-sigma` `square-slash` `square-sparkles` `square-split-horizontal` `square-split-vertical` `square-square` `square-stack` `square-star` `square-stop` `square-terminal` `square-text` `square-user-round` `square-user` `square-x` `square` `squares-exclude` `squares-intersect` `squares-subtract` `squares-unite` `squircle-dashed` `squircle` `squirrel` `stamp` `star-check` `star-half` `star-minus` `star-off` `star-plus` `star-x` `star` `step-back` `step-forward` `stethoscope` `sticker` `sticky-note-check` `sticky-note-minus` `sticky-note-off` `sticky-note-plus` `sticky-note-x` `sticky-note` `sticky-notes` `stone` `store` `stretch-horizontal` `stretch-vertical` `strikethrough` `subscript` `summary` `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` `table` `tablet-smartphone` `tablet` `tablets` `tag-plus` `tag-x` `tag` `tags` `tally-1` `tally-2` `tally-3` `tally-4` `tally-5` `tangent` `target` `telescope` `tent-tree` `tent` `terminal` `test-tube-diagonal` `test-tube` `test-tubes` `text-align-center` `text-align-end` `text-align-justify-center` `text-align-justify-end` `text-align-justify-start` `text-align-justify` `text-align-start` `text-cursor-input` `text-cursor` `text-initial` `text-quote` `text-search` `text-wrap` `theater` `thermometer-snowflake` `thermometer-sun` `thermometer` `thumbs-down` `thumbs-up` `tic-tac-toe` `ticket-check` `ticket-minus` `ticket-percent` `ticket-plus` `ticket-slash` `ticket-x` `ticket` `tickets-plane` `tickets` `timeline` `timer-off` `timer-reset` `timer` `toggle-left` `toggle-right` `toilet` `tombstone` `tool-case` `toolbox` `toothbrush-sparkles` `toothbrush` `tornado` `torus` `touchpad-off` `touchpad` `towel-rack` `tower-control` `toy-brick` `tractor` `traffic-cone` `trailer` `train-front-tunnel` `train-front` `train-track` `tram-front` `transgender` `trash-off` `trash` `tree-deciduous` `tree-palm` `tree-pine` `trees` `trending-down` `trending-up-down` `trending-up` `triangle-alert` `triangle-dashed` `triangle-right` `triangle` `triangles-centerline-dashed-horizontal` `triangles-centerline-dashed-vertical` `trophy` `truck-electric` `truck` `tube-lotion` `turkish-lira` `turntable` `turtle` `tv-minimal-play` `tv-minimal` `tv` `type-outline` `type` `umbrella-off` `umbrella` `underline` `undo-2` `undo-dot` `undo` `unfold-horizontal` `unfold-vertical` `ungroup` `university` `unlink-2` `unlink` `unplug` `upload` `usb-c-port` `usb` `user-check` `user-cog` `user-group` `user-key` `user-lock` `user-minus` `user-pen` `user-plus` `user-round-arrow-left` `user-round-check` `user-round-cog` `user-round-group` `user-round-key` `user-round-minus` `user-round-pen` `user-round-plus` `user-round-search` `user-round-star` `user-round-x` `user-round` `user-search` `user-shield` `user-star` `user-x` `user` `users-collaboration` `users-round-collaboration` `users-round` `users` `utensils-crossed` `utensils` `utility-pole` `van` `variable` `vault` `vector-polygon` `vector-square` `vegan` `venetian-mask` `venus-and-mars` `venus` `vibrate-off` `vibrate` `video-off` `video` `videotape` `view` `virus-off` `virus` `voicemail` `volleyball` `volume-1` `volume-2` `volume-off` `volume-x` `volume` `vote` `wallet-cards` `wallet-minimal` `wallet` `wallpaper` `wand-sparkles` `wand` `warehouse` `washing-machine` `watch` `waves-arrow-down` `waves-arrow-up` `waves-horizontal` `waves-ladder` `waves-vertical` `waypoints` `webcam-off` `webcam` `webhook-off` `webhook` `weight-tilde` `weight` `wheat-off` `wheat` `whistle` `whole-word` `wifi-cog` `wifi-high` `wifi-lock` `wifi-low` `wifi-off` `wifi-pen` `wifi-sync` `wifi-zero` `wifi` `wind-arrow-down` `wind-arrow-up` `wind` `wine-off` `wine` `workflow` `worm` `wrench-off` `wrench` `x-line-top` `x` `zap-off` `zap` `zodiac-aquarius` `zodiac-aries` `zodiac-cancer` `zodiac-capricorn` `zodiac-gemini` `zodiac-leo` `zodiac-libra` `zodiac-ophiuchus` `zodiac-pisces` `zodiac-sagittarius` `zodiac-scorpio` `zodiac-taurus` `zodiac-virgo` `zoom-in` `zoom-out` | `"star"` | icon |
| `mode` — Mode · Behavior — Icon displays a Lucide graphic. Button enables click and keyboard activation without a caption. | `enum` — `icon` `button` | `"icon"` | mode |
| `accessibleLabel` — Accessible label · Accessibility — Name announced by assistive technology. Never displayed as a caption; falls back to the component name. | `string` | `""` | accessibleLabel |
| `strokeWidth` — Stroke width · Appearance | `number` | `2` | strokeWidth |
| `currentRowBindings` — Current row · Data — Bind writable visual values to fields of this repeated row. | `current-row-bindings` — Editor: current-row-bindings | `[]` | currentRowBindings |

## API in code

| Member | Signature | Access |
| --- | --- | --- |
| `icon` | `icon: LucideIconName;` | Read and write |
| `mode` | `mode: WebIconMode;` | Read and write |
| `accessibleLabel` | `accessibleLabel: string;` | Read and write |
| `strokeWidth` | `strokeWidth: number;` | Read and write |
| `onClick` | `set onClick(handler: WebComponentEventHandler<this> \| null);` | Read and write |

### `click`

method

```ts
click(): void;
```

Example

```ts
Icon1.click();
```

Inherited members (27)

| Member | Signature | Access |
| --- | --- | --- |
| `currentRowBindings` | `currentRowBindings: readonly WebCurrentRowBinding[];` | Read and write |
| `element` | `readonly element: TElement;` | Read-only |
| `id` | `readonly id: string;` | Read-only |
| `name` | `readonly name: string;` | Read-only |
| `visible` | `visible: boolean;` | Read and write |
| `collapseWhenHidden` | `collapseWhenHidden: boolean;` | Read and write |
| `enabled` | `enabled: boolean;` | Read and write |
| `x` | `x: number;` | Read and write |
| `y` | `y: number;` | Read and write |
| `width` | `width: number;` | Read and write |
| `height` | `height: number;` | Read and write |
| `margin` — Outer spacing on all four sides, in pixels. | `margin: number;` | Read and write |
| `marginTop` | `marginTop: number;` | Read and write |
| `marginRight` | `marginRight: number;` | Read and write |
| `marginBottom` | `marginBottom: number;` | Read and write |
| `marginLeft` | `marginLeft: number;` | Read and write |
| `alignSelf` | `alignSelf: RuntimeLayoutAlignSelf;` | Read and write |
| `tabIndex` | `tabIndex: number;` | Read and write |
| `backgroundColor` | `backgroundColor: string;` | Read and write |
| `color` | `color: string;` | Read and write |
| `borderColor` | `borderColor: string;` | Read and write |

### `focus`

method

```ts
focus(options?: FocusOptions): void;
```

### `show`

method

```ts
show(): void;
```

### `hide`

method

```ts
hide(): void;
```

### `bindEvent`

method

```ts
bindEvent(eventName: string, handler: WebComponentEventHandler<this> | null): () => void;
```

### `emit`

method

```ts
emit(eventName: string, detail?: unknown): boolean;
```

### `dispose`

method

```ts
dispose(): void;
```

## Events

Link methods in **Interaction**. [How to use events](https://webrad.atentor.com/docs/interactions).

### OnClick

Standard event (Event).

Signature and example

```ts
import type { WebIcon } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Icon1Click(
    sender: WebIcon,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
```

### OnDblClick

Standard event (Event).

Signature and example

```ts
import type { WebIcon } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Icon1DblClick(
    sender: WebIcon,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
```

### OnFocus

Standard event (Event).

Signature and example

```ts
import type { WebIcon } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Icon1Focus(
    sender: WebIcon,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
```

### OnBlur

Standard event (Event).

Signature and example

```ts
import type { WebIcon } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Icon1Blur(
    sender: WebIcon,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
```

### OnKeyDown

Standard event (Event).

Signature and example

```ts
import type { WebIcon } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Icon1KeyDown(
    sender: WebIcon,
    event: Event,
  ): Promise<void> {
    if (event instanceof KeyboardEvent) console.log(event.key);
  }
}
```

### OnKeyUp

Standard event (Event).

Signature and example

```ts
import type { WebIcon } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Icon1KeyUp(
    sender: WebIcon,
    event: Event,
  ): Promise<void> {
    if (event instanceof KeyboardEvent) console.log(event.key);
  }
}
```

### OnMouseEnter

Standard event (Event).

Signature and example

```ts
import type { WebIcon } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Icon1MouseEnter(
    sender: WebIcon,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
```

### OnMouseLeave

Standard event (Event).

Signature and example

```ts
import type { WebIcon } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Icon1MouseLeave(
    sender: WebIcon,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
```