Choosing icons for a product gets harder when the same action appears in a dashboard, a service directory and a Flutter screen. Phosphor Icons, dashboard-icons and morphnext cover different parts of that job: a flexible base set, a catalogue of service marks and animated state changes.
Phosphor Icons for the shared base set
Phosphor Icons is a general icon family for interfaces, diagrams and presentations. The repository describes 1,248 icons in six weights, with raw stroke information retained for further styling.
Who should try it: teams building product UI where the same icon needs to move between web, React, Vue or Flutter.
First experiment: choose one action, such as search or settings, and render it at two sizes and two weights. Check whether the stroke change still reads as the same action.
Limitation: the family gives you a consistent vocabulary, but it does not provide your product's service logos or decide which weight belongs in each context. Observed 2026-10-16.
dashboard-icons for service directories
dashboard-icons collects more than 1800 curated icons for services, applications and tools. It offers SVG, PNG and WEBP formats, with light and dark variants and a kebab-case naming convention.
Who should try it: anyone making a dashboard or app directory where recognizable service marks matter more than a single generic icon family.
First experiment: pick five services already shown in your product and test the SVG files in one directory row. Keep the icon size, background and label width fixed, then inspect which marks still read clearly.
Limitation: this is a catalogue of service imagery, so visual consistency depends on the source marks and the variants you choose. It is a better fit for directories than for a product-wide action language. Observed 2026-10-15.
morphnext for Flutter state changes
morphnext turns bundled Flutter IconData glyphs into interruptible, spring-driven vector morphs. AnimatedMorphIcon starts from the shape currently on screen, while MorphIcon accepts controlled progress for gestures, scrolling or timelines.
Who should try it: Flutter teams whose icons change state, such as menu to close or outline to filled.
First experiment: replace one two-state button with AnimatedMorphIcon, then interrupt the transition by tapping twice. Add semanticLabel values for both states and compare the result with a regular icon swap.
Limitation: morphnext works with bundled font-backed IconData and monochrome rendering. It does not morph arbitrary Flutter Path objects or SVG artwork, and some icon pairs can produce surprising intermediate shapes. Observed 2026-10-15.
Put the three choices in the same decision
Phosphor Icons is the broadest starting point for a shared action vocabulary. dashboard-icons is the specific choice for service marks in dashboards and directories. morphnext handles motion between icon states inside Flutter.
A small product can use all three without treating them as interchangeable. Use Phosphor Icons for actions, dashboard-icons for recognizable external services and morphnext when a state change needs to show continuity.
In your own project, pick one repeated action and one service directory row. Render the action with two Phosphor weights, place the service mark from dashboard-icons beside it, then try the same action transition with morphnext if the screen is Flutter. I'd keep the version that remains recognizable at the smallest size and remove the one that needs extra explanation.
Next up: Tech updates
Saturday's edition is next. 🔗 Explore the editions →
Top comments (0)