Skip to content
Shiny.Net.HttpServer v1 - A lightweight feature rich HTTP Server - Tunnels, Websockets, AOT, ASPNET Featureset, & Works EVERYWHERE!Let me see!

The Icon Set

Every built-in icon carries motion authored for that icon specifically. That is the difference between a motion icon and an icon with an animation applied to it: a trash can’s lid lifts off its hinge, a download arrow falls out of the tray and reappears above it, a signal meter lights from the handset outwards.

Icon Motion
check Draws itself on, with a small settle at the end so it lands rather than stops.
close Rotates a half turn — which lands the cross back on itself — while both strokes wipe off and back on.
plus A quarter turn with an overshoot. A plus is symmetric every 90°, so it can afford to.
menu Morphs into a cross and back. Each bar spins about its own centre, then slides to the middle.
search Sweeps the glass across the surface it is searching.
settings The cog twists and returns. It is not rotationally symmetric, so it cannot stop part way round.
refresh One full turn.
loader Turns while its arc trims, so the ring appears to chase its own tail.
trash The lid swings up off its left hinge while the bin shivers.
download The arrow falls out of the tray, vanishes, and reappears above it.
upload The same in reverse.
edit The pencil writes while the line draws itself in underneath.
filter Settles vertically, like something poured through it.
share The links draw outwards and each node pops as the link reaches it.
copy The front sheet slides off the back one and returns.
power The stem draws, then the arc closes around it, then the whole thing pulses.
Icon Motion
bell Swings from its crown, with the clapper running a wider arc so it catches up late.
heart A double thump on the rhythm of a real heartbeat.
star Rocks and swells.
bookmark Lifts and drops back with a bounce.
mail The flap folds up about its crease.
message Three dots bounce in sequence — the typing indicator.
user A small nod.
home The roof lifts and lands; the door draws itself in.
calendar The hangers wobble while the body squashes.
lock The shackle pops up, and the body jiggles as it drops back.
eye Blinks — lid and pupil squash about the same line, held shut just long enough to read.
camera The lens snaps shut and open while the body recoils.
location Drops in from above and lands with a bounce.
clock Both hands turn at a believable ratio: a minute for an hour.
cloud Drifts.
sun The rays turn 45° — which lands them exactly on themselves — while everything pulses.
Icon Motion
play Dips and springs back.
pause The two bars pulse out of step.
volume The waves leave the cone in order.
wifi The arcs light from the handset outwards, like a signal being acquired.
chart The bars grow out of the baseline in sequence.
arrow-right Travels right while its shaft retracts behind the head.
chevron-down Bobs, landing with a bounce.
thumbs-up Rocks about its wrist.
warning Shakes while the exclamation flashes.
info The circle pulses while the “i” hops.
foreach (var name in MotionIconLibrary.Names)
Console.WriteLine(name);
var bell = MotionIconLibrary.Get("bell"); // throws if missing
var maybe = MotionIconLibrary.Find("bell"); // null if missing

Lookup is case-insensitive. MotionIconLibrary.All gives you the definitions themselves, which is how the sample app builds its gallery.

Register replaces a built-in as well as adding a new one, so an app with its own visual language can swap the artwork for check once at startup instead of passing a definition in at every call site:

MotionIconLibrary.Register(new MotionIconDefinition(
"check",
[new MotionIconPart("mark", "M5 13L10 18L19 6")],
MotionSpecBuilder.Build(400, m => m
.Trim("mark", k => k.At(0d, 0d, MotionEase.CubicOut).At(1d, 1d)))));

Every Icon="check" in the app picks it up.