Icon

One SVG mark drawn from a path definition, decorative by default and named when it carries meaning.

<tp-icon>
Icon
Default density Compact density Restart from the initial state Show the copyable source

Usage

An Icon has no catalog of names: assign an IconDefinition to its icon property. In an app you import one definition module, such as @tweakpad/ui/icons/plus, so only the artwork you use is bundled. The examples here inline their definitions.

import '@tweakpad/ui/register/icon'; import { plusIcon } from '@tweakpad/ui/icons/plus'; const icon = document.querySelector('tp-icon'); icon.icon = plusIcon;

The register/icon entry registers only tp-icon, while register opts into every component. The main entry exports the TpIcon class and IconDefinition type but does not re-export artwork.

Meaning

Without label an Icon is decorative and hidden from assistive technology, which is right when text beside it already says the same thing. A non-empty label gives it role="img" and an accessible name, for the case where the icon is the only signal.

Decorative and labelled
Default density Compact density Restart from the initial state Show the copyable source
New project Maya Chen

Size and color

size takes any CSS length and sets a square extent; without it the Icon uses the theme’s medium icon size. The artwork strokes with currentColor, so it follows the surrounding text color.

The default theme uses the shared medium icon extent (1rem, normally 16 CSS pixels). Small icons use 0.875rem; large icons use 1.25rem. These extents derive from the rem-based --tp-spacing seed, so changing the theme’s root spacing seed keeps them proportional. Override the icon-size roles directly for a scoped icon scale. Explicit size still overrides the shared extent; hit targets are unchanged.

Size and color
Default density Compact density Restart from the initial state Show the copyable source

Custom artwork

A definition is a viewBox and a list of paths, never an HTML string, so your own marks render on the same path as the library’s. Paths default to a 2-unit currentColor stroke with no fill; set fill: 'currentColor' and stroke: 'none' for solid shapes.

Custom definition
Default density Compact density Restart from the initial state Show the copyable source

Media icons

@tweakpad/ui/icons/media offers the media-control set as 24×24 outline artwork with the same 2-unit stroke as the single-icon modules. Each definition is a separate named export, so importing one keeps the others out of a bundled build:

import { pauseIcon, playIcon } from '@tweakpad/ui/icons/media';

The grouped mediaIcons object (keys below) is for layouts that use the whole set; importing it includes every media definition. MediaIconName is the union of its keys.

KeyNamed exportUseplayplayIconPlaypausepauseIconPausereplayreplayIconRestart after the endvolumeHighvolumeHighIconVolume, upper rangevolumeLowvolumeLowIconVolume, lower rangevolumeOffvolumeOffIconMuted or zero volumecaptionsOncaptionsOnIconCaptions showncaptionsOffcaptionsOffIconCaptions hiddenfullscreenEnterfullscreenEnterIconEnter fullscreenfullscreenExitfullscreenExitIconExit fullscreenpipEnterpipEnterIconEnter picture-in-picturepipExitpipExitIconExit picture-in-pictureseekForwardseekForwardIconSeek forwardseekBackwardseekBackwardIconSeek backward (mirror of seek forward)speedspeedIconPlayback ratequalityqualityIconRendition qualityaudioaudioIconAudio tracksettingssettingsIconSettings; the same definition as icons/settingscastcastIconRemote playbackairplayairplayIconAirPlay-style remote playbackliveliveIconFilled live-edge dotcheckcheckIconSelected menu value; the same as icons/check

settingsIcon (@tweakpad/ui/icons/settings) is also the settings entry of navigationIcons.

File icons

@tweakpad/ui/icons/upload-cloud exports uploadCloudIcon, the upload mark of File upload and the cloud entry of @tweakpad/ui/icons/empty-state. @tweakpad/ui/icons/image exports imageIcon (an image file) beside imageOffIcon (an image that could not load); @tweakpad/ui/icons/file-text exports fileTextIcon for other files.

Text editing icons

Rich-text toolbars, menus and popovers can use these 24×24 outline definitions, drawn with the same 2-unit stroke as the single-icon modules. Each is a separate named export, so importing one keeps the others out of a bundled build:

import { strikethroughIcon } from '@tweakpad/ui/icons/text-formatting'; import { bulletListIcon, quoteIcon } from '@tweakpad/ui/icons/text-blocks';
ModuleNamed exportsUse@tweakpad/ui/icons/text-formattingboldIcon, italicIcon, underlineIcon, strikethroughIcon, codeIcon, superscriptIcon, subscriptIcon, highlighterIcon, baselineIcon, removeFormattingIconMarks, highlight, text color and clearing formatting@tweakpad/ui/icons/text-blocksheading1Icon, heading2Icon, heading3Icon, pilcrowIcon, bulletListIcon, orderedListIcon, taskListIcon, quoteIcon, codeBlockIcon, calloutIcon, embedIconBlock kinds@tweakpad/ui/icons/text-aligntextAlignLeftIcon, textAlignCenterIcon, textAlignRightIcon, textAlignJustifyIconText alignment@tweakpad/ui/icons/linklinkIcon, unlinkIcon, cornerDownLeftIconAdding, removing and applying links@tweakpad/ui/icons/table-editingtableIcon, insertRowAboveIcon, insertRowBelowIcon, insertColumnLeftIcon, insertColumnRightIcon, mergeCellsIcon, splitCellIcon, headerRowIcon, headerColumnIcon, paintBucketIcon, clearCellsIconTable structure, header rows and columns, cell background and clearing cells@tweakpad/ui/icons/arrowsarrowUpIcon, arrowDownIcon, arrowLeftIcon, arrowRightIconMoving blocks, rows and columns@tweakpad/ui/icons/ellipsisellipsisVerticalIconMore actions, stacked@tweakpad/ui/icons/image-plusimagePlusIconAdding an image@tweakpad/ui/icons/at-signatSignIconMentions@tweakpad/ui/icons/banbanIconNo color, or none of a set

The text-alignment and column icons are physical: in a right-to-left editor, start alignment shows textAlignRightIcon and a column inserted before the current one shows insertColumnRightIcon. The horizontal ellipsis is the more entry of navigationIcons (@tweakpad/ui/icons/navigation). @tweakpad/ui/icons/text-formatting also exports bookmarkIcon and filledBookmarkIcon. Editing surfaces reuse undoIcon, redoIcon, imageIcon, trashIcon, copyIcon, copyPlusIcon, minusIcon, plusIcon, gripVerticalIcon, chevronDownIcon, checkIcon and externalLinkIcon from their own modules, such as @tweakpad/ui/icons/undo.

API Reference

Every element also accepts motion-policy.

Attributes

AttributePropertyTypeDefaultDescriptionlabellabelstring''Names the icon when it is the only signal of its meaning; leave it empty when text beside it says the same.sizesizestring''A square extent as a CSS length; by default the icon size of the enclosing control, or the medium icon size.

Properties

PropertyTypeDefaultDescriptioniconIconDefinition | undefined—The artwork: a definition imported from an icon module, such as @tweakpad/ui/icons/plus, or your own.partPresentationPartPresentation{}Presentation contributions for this Icon's parts, merged over the theme's.presentationControllerread-only—new PresentationController(this)Applies the theme's presentation and partPresentation to this Icon's parts.

CSS parts

PartDescription::part(icon-graphic)The SVG drawing of the artwork.

Components, widgets and patterns that use this one.

Component

Button

One action or navigation target, in six visual treatments and four sizes.

Component

Checkbox

A Boolean form control with an inline label, a mixed state and native form participation.

Component

Collapsible

One disclosure that shows and hides its content behind a labelled native button.

Component

Copy button

Writes a value to the clipboard and confirms the result in place with a check and an announcement.

Show more
Component

Switch

A binary setting that applies immediately, with Checkbox's form and validation behavior.

Component

Theme switcher

Chooses the light, dark or system color scheme as a switch, an icon button or a segmented group.

Component

Input

One native text input bound to Field behavior for labels, descriptions, errors and validation.

Component

Native select

The browser's own select picker, styled to match Input and wired into Field and form submission.

Component

One-time code field

A fixed-length verification code shown as character slots, backed by one native input and one form value.

Component

Questionnaire

An ordered native form that asks one question at a time, with choices, free text, skipping and submission.

Component

File upload

Collects files by drop, picker or paste, validates them and lists them as attachments, chips or image tiles.

Component

Command palette

A searchable list of commands with groups, icons and shortcuts, shown inline or in a dialog.

Component

Select

Choose one or several values from a finite list, optionally with a search query.

Component

Breadcrumb

The trail of ancestor pages leading to the current one, as native links in a navigation landmark.

Component

Menu

A popup list of commands, checks, radio choices and nested submenus, opened from a trigger or a context target.

Component

Navigation menu

Site navigation links with optional hover and press panels that keep native link behavior.

Component

Pagination

Real page links with previous and next destinations, for moving through a paged result set.

Component

Carousel

Slotted slides at discrete positions, with buttons, keyboard, swipe and indicators sharing one selection.

Component

Data visualization

A chart frame that connects your renderer to responsive sizing, series colors, tooltips, a legend and an accessible data table.

Component

Message Scroller

A native transcript viewport that opens at the latest message, follows streaming replies and jumps back to the end on request.

Component

Toast

Transient notifications from one queue, stacked in a corner without taking focus from the current task.

Component

Citation

An inline chip that attributes a statement to its source, with an optional number, site icon and hover preview.

Component

Description list

Label and value pairs for the details of a record, with an optional Show more for the rest.

Component

Image

A responsive image in an optional fixed-ratio frame, with a loading placeholder, a failure fallback, hover zoom, parallax and scroll reveal.

Component

QR code

A scannable QR code for a text value on a light tile, with optional copy and download actions.

Component

Autocomplete

A text field that suggests matching items as you type, with typo-tolerant ranking.

Component

Tree view

A hierarchy to expand, collapse, select and activate, from nested markup or from records.

Component

Navigation panel

Persistent app navigation beside the main content that collapses to an icon rail or moves into a drawer on small screens.

Component

Media Player

Video and audio playback with composable controls, preset layouts, keyboard shortcuts and gestures over a native media element.

Component

Map

An interactive geographic viewport with declarative pins, a selection overlay and zoom controls over the basemap engine you supply.

Widget

Color picker

Edits one CSS color through a saturation plane, channel sliders, a harmony wheel or swatches, inline or in a popup.

Widget

Easing editor

Edits one easing curve on a graph with Bézier handles, custom points or spring parameters, with presets, a duration, a live preview and export adapters.

Widget

Flow

A node graph editor with typed ports, routed edges, schema-driven nodes, a node library, an inspector, automatic layout and optional run state.

Widget

Emoji picker

Chooses one emoji from a searchable, categorized grid with skin tones, recent and custom emoji, inline or in a popup.

Widget

Text editor

A rich text field on an editing engine your app installs, as a classic toolbar editor or a node editor of blocks.