Show the behavior, not just the icon
The demo on this page lets you select an icon and see a short motion sequence. It uses actual exported icons, rather than a promotional video or a static mockup.
Case study / Lively Icons
A little motion. A lot more character.
Turning a familiar interface detail into a product: a React icon library, a place to explore it, and a hands-on demonstration of motion with a purpose.
- My role
- Creator and maintainer
- Discipline
- Product + engineering
- Format
- React icon library
Try the interactionLive demo
Select an icon to preview its motion.
Heart
Interactive demonstration using icons from the library. Motion respects your device preferences.
01 / The brief
Useful first. Memorable second.
Icons do the quiet work of an interface. They point, confirm, warn, and help people find their way. Motion can add another layer of meaning—but it can also turn a simple action into a distraction.
The goal: make an interface feel more alive while keeping its controls familiar. Give a developer something they can put into a real React project, and give a visitor a way to experience it before reading a feature list.
02 / The decisions
The details are the product.
Keep a useful static foundation
This site imports a small selection from livelyicons/static. Motion is added around those components for the demonstration. The artwork remains useful when animation is switched off.
Let the visitor stay in control
Selections are native buttons with accessible names and pressed states. The preview responds to the selected icon and respects the visitor’s reduced-motion preference.
03 / The implementation
A small interaction, built deliberately.
The portfolio demonstration combines React state, static SVG icon components, and Motion. Selecting a button changes the current icon and runs its short preview. The selected label is announced to assistive technology.
The important boundary is between the icon and the behavior around it. This demo can change its timing, selection, or layout without changing the underlying artwork. The demo here puts those choices in a real interface.
04 / The result
Something you can actually use.
Lively Icons is a public project with a React package used by this site. The case study puts the product in your hands: explore the demo, visit the library, and inspect how a small detail changes the feel of an interface.
The takeaway: a portfolio should do some of the work it describes. For this project, that means letting the interaction make the argument.
From a detail to a product
Have something worth building?
I work across product, design, and engineering to turn a useful idea into a working experience.