Morph Icon
Line icons whose strokes morph between two glyphs, with a toggle button. Six pairs: play/pause, menu/close, copy/check, plus/minus, chevron down/up, sun/moon.
Preview
Harbour at dawn
1:42 / 4:08
Tomás Reyes · Field recordings
Studio notes14 pages
Invite link
invite/7Q4K-29XD-MALIK
Billing details
Priya Natarajan · Team plan
- Card
- Ending 4417 · renews Dec 1
- Seats
- 8 of 10 used
- Next invoice
- $1,284.50
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | "play-pause" | "menu-close" | "copy-check" | "plus-minus" | "chevron-down-up" | "sun-moon" | — | Which pair to draw (MorphIcon and MorphIconButton). |
| state | 0 | 1 | 0 | Which end of the morph to show; controlled on MorphIconButton. |
| defaultState | 0 | 1 | 0 | MorphIconButton: initial state when uncontrolled. |
| onStateChange | (state: 0 | 1) => void | — | MorphIconButton: called with the next state on every press. |
| label | string | [string, string] | — | MorphIconButton: accessible name, fixed or one per state. |
| size | number | 24 | Icon width and height in px. |
| variant | "ghost" | "raised" | "key" | "ghost" | MorphIconButton: flat until hovered, a raised pebble, or the lit key. |
| buttonSize | "sm" | "md" | "lg" | "md" | MorphIconButton: button box of 32, 36 or 44 px; the glyph keeps its size. |
| strokeWidth | number | 1.5 | Stroke width in 24-grid units. |
| duration | number | 300 | Morph length in ms; instant under reduced motion. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.