19 demos of Lordicon system icons
An icon is a reaction, not a decoration
A star that fills when you press it. A lock that wakes when you click into the field. A bell that rings when something new arrives. Everyday controls, each with an icon that moves because something happened, and each ready to copy into your own project.
The control sets its state; the icon follows. No animation code to write.
The project on GitHub
All demos
-
Accordion
A chevron that morphs with aria-expanded, over a panel that animates its own height.
-
Add new card
A dashed tile with a plus that turns on hover. The whole script is defineElement().
-
Add to cart
A button that opens to say what it did, and a heart that stays filled. One attribute each.
-
Alerts
Four kinds of alert, and icons that greet the card they arrive on.
-
Button progress
A button that fills while the work runs, loops its icon until the work stops, and shows a receipt. As a download and as an upload.
-
Checkbox list
Native checkboxes whose tick is an icon following data-checked, in three styles.
-
Command menu
A palette you open with a shortcut and walk with the arrow keys while the caret stays in the field.
-
Dropdown menu
A menu of grouped commands whose rows answer the arrow keys and the pointer through one attribute.
-
Input form
A composer at the foot of the page, so its menu opens upward, with a submenu and a search inside.
-
Loading list
Five steps of a job, each with a spinner that turns into a tick or a cross. The state of a step is one attribute.
-
Menu bar
A toolbar where the picked tool and the list style morph into place, the action plays on press, and every button shows its name.
-
Notification menu
A bell that rings when the count goes up, over a panel that unrolls and brings its rows in behind it.
-
Pagination
A frame that stretches to the page you picked and then catches up with itself, in three styles of button.
-
Password field
A lock that answers focus, an eye that follows the toggle, and a hint that arrives word by word.
-
Pricing
Three plans whose icons play when the pointer enters the card. In four layouts.
-
Rating
Five stars that light up one after another, and fill the same way when you pick one.
-
Search bar
A field whose magnifier greets the cursor, and whose clear button draws itself once the typing has stopped.
-
Sidebar navigation
Seven destinations whose icons answer the pointer and the keyboard, and one attribute that says where you are.
-
Star button
A star that fills as you press it, with a count read back off the same attribute.
No demo carries that tag yet.