Productivity Blue

Sixteen pieces span planning, doing and reviewing: Checkmark, Checklist, Target, Flag, Hourglass, Timer, Rocket, Lightbulb, Puzzle, Gear, Magnifier, Filter, Funnel, Sort, Bookmark and Star. Filter, Funnel and Sort map neatly to data-table controls, while Rocket and Flag handle milestones and launches.

Every asset is a transparent PNG with a WebP alternative. Widths run from 170 to 270 px and heights from 193 to 271 px, so the Hourglass at 188 by 262 px suits vertical card layouts well. That makes the pack easy to drop into a dashboard where status, deadlines and next steps need a quick visual cue.

Where this set fits

• Milestone markers on a product roadmap slide
• Done, in-progress and idea states in a to-do app
• Feature highlights on a time-tracking tool homepage
• Sorting and filtering hints in a table UI mockup

Integrate with one image and shared CSS

Includes a WebP sprite at 128px display size, shared animation styles, a React component and original files. The sprite renders the collection with one image request. Use individual WebP files when you need native resolution.

<link rel="stylesheet" href="./assets.css">
<span class="cc-asset cc-checkmark-productivity-blue cc-float" role="img" aria-label="Checkmark"></span>

cc-float · cc-pulse · cc-pop · cc-swing · cc-spin. Respects reduced motion and needs no animation library.