CSS Icons & Shapes Effects

Three ocean bars that fold into an X on click — one checkbox, no JavaScript.

Four directional chevrons drawn from two borders, in blue, with a lift on hover.

Play, pause and stop glyphs cut from borders on ocean gradient discs.

Chat bubble with a border-drawn tail on an ocean gradient fill.

Card with a rotated ocean ribbon clipped to the top-right corner.

Two clipped ten-point stars offset into an ocean sale burst that twists on hover.

Floating ocean action button whose plus rotates into a close cross.

Teardrop made from three rounded corners and one square one, floating over a shadow that shrinks as it rises so the lift reads as height.

Magnifier whose ring flattens into a bar and whose handle counter-rotates, turning the glass into a cross without swapping any element.

Shield outline made by clipping a filled shape and an inset dark copy to the same polygon, with a padlock drawn from two children.

Bell drawn from one rounded block plus a crown and a lip, pivoting at the mount while the clapper runs a second, later-peaking keyframe so the two do not move as one body.

Three nested rings showing only their top border and rotated 45 degrees, which turns a circle into the quarter-arc the signal glyph is actually made of.

A CSS envelope whose flap folds back and a lined letter slides up out of it on hover.

Fin-and-porthole rocket over a flame that flickers continuously, the body lifting clear of the exhaust on hover.

A two-tone paper dart clipped from a gradient, which darts up and to the right on hover while three speed dashes settle into place behind it.

Folder drawn from one element and two pseudo-elements, the front flap hinged on its bottom edge so it opens in perspective on hover.

Cloud built from a pill and two circles inheriting its gradient, with three drops falling on a stagger so the rain never syncs into a row.

Cup, stem and plinth as three elements with the handles as mirrored pseudo-elements, so the whole award is drawn without an image.

Two gapped arcs cut from one conic gradient with border-drawn heads at each opening, the whole glyph spinning on an ease that speeds through the middle of each turn.

Gear teeth as alternating conic stops with the disc centre masked away, the hub ring masked the opposite way — two elements, no path data, twelve teeth.

Battery outline with one cell lit that charges cell by cell on hover and turns its casing green.

Line-drawn mug of coffee with three wisps of steam rising and skewing away on staggered delays.

A heart built from a rotated square and two discs that gives a double beat every few seconds and throws out an expanding like-ring when hovered.

A play triangle built from two clipped halves that separate and square off into a pause icon on hover.

Download glyph whose arrow drops into the tray on hover while the tray itself lights up to catch it.

A brass padlock whose shackle lifts and swings open about its right hinge on hover while the body turns green to confirm the unlock.

An organic gradient blob whose border-radius keeps morphing between shapes, brightening on hover.

An almond-shaped eye with a cyan iris whose lid slides shut when hovered.

A dim CSS lightbulb that lights up amber with a soft glow halo on hover.