Design System — POC
Icon Style Evaluation
Purpose
Overview & Scope
This POC evaluates whether the current course icon set should be retained, refreshed, or replaced with a more modern icon system. It presents six icon styles side by side against a consistent set of learning activity and material concepts, and provides structured criteria and review questions to support a design decision with the Multimedia Team.
Icons Under Evaluation
The following concepts are compared across all six icon styles:
Learning Activities
- Learn
- Practice
- Do
- Apply AI
- Apply PULSE
Learning Materials
- Video
- Reading
- Assignment
- Discussion
- Test
- Interactive
- Audio
Icon Styles Compared
All are open-source and SVG-based except Custom (future concept).
Style Notes
Each icon library has a distinct visual personality defined by stroke weight, corner treatment, and icon metaphor choices. These differences become significant when icons appear small and in context with course labels and UI text.
- Current — Lucide-derived, 2px stroke, round caps. Used throughout the V2 prototype.
- Lucide — The current library, actively maintained. Compared using alternative icon selections for the same concepts.
- Heroicons — By the Tailwind team. 1.5px stroke, more geometric. Strong accessibility track record.
- Tabler — 5,500+ icons, 2px stroke. Highly consistent grid system. MIT licensed.
- Phosphor — Six weights (thin to bold) plus duotone. More expressive; shown here at regular weight with duotone fill for select icons.
- Multimedia Team Custom — Placeholder for program-specific icon concepts to be designed by the Multimedia Team. Highest consistency; highest production cost.
Side by Side
Icon Comparison
Each row shows the same concept rendered in six icon styles. Scroll horizontally on narrow screens. Icons are displayed at 24×24px — the standard size used throughout the template system.
Round caps
Alt. choices
Geometric
Grid-precise
Duotone
Concept only
Assessment
Evaluation Criteria
Each icon style is rated across eight criteria most relevant to a course design system. Ratings reflect how well each library meets the needs of a learner-facing educational product at scale. Custom icons are excluded pending concept development.
Rating scale: 1 = Poor | 2 = Fair | 3 = Adequate | 4 = Good | 5 = Excellent
Reviewer Prompts
Review Questions
Use these questions to guide your evaluation and capture feedback for the design decision. Write notes in the fields below or share responses in the review session.
Question 1
Which icon style is easiest to recognize without a label at 24px?
Question 2
Which style feels most modern and appropriate for a healthcare/allied health program?
Question 3
Which style best supports course navigation — helping learners quickly identify where they are and what to do next?
Question 4
Which style feels most professional for a presentation to accreditors, leadership, or prospective students?
Question 5
Which style would scale best across all course templates — from orientation pages to clinical practice modules?
Question 6
For Apply AI and Apply PULSE specifically — do any of the standard library icons adequately represent these program-specific concepts, or is custom icon design needed?
Question 7
Does the duotone approach (Phosphor) add meaningful visual hierarchy, or does it introduce unnecessary complexity?
Question 8 — Decision
Based on this review: should we keep, refresh, or replace the current icon system? If replace, which library is the preferred candidate?
Summary
Recommendation
The table below summarizes the strengths, weaknesses, and recommended use case for each icon style based on the evaluation criteria. A final recommendation follows.
| Icon Style | Strengths | Weaknesses | Recommended Use |
|---|---|---|---|
| Current Score: 29/40 |
Already integrated across all templates. Team is familiar with the icon set. No migration cost. | Slightly dated visual style relative to modern SaaS and edtech products. Some icon choices are less intuitive for learners. Mixed sources reduce consistency. | Hold — Stable but Dated Acceptable as-is for short-term use. Not recommended for long-term template investment. |
| Lucide Score: 37/40 |
Direct upgrade path from current icons — same family, minimal disruption. Actively maintained with 1,500+ icons. Excellent consistency and coverage. | Similar appearance to current set, so visual refresh may be subtle. Still a third-party dependency. | Refresh — Low Risk Ideal if the goal is improvement with minimal re-work. Drop-in replacement strategy. |
| Heroicons Score: 39/40 |
Highest overall rating. 1.5px stroke gives a cleaner, more professional appearance at small sizes. Strong accessibility pedigree. Actively maintained by Tailwind Labs. Exceptional documentation. | Smaller library than Tabler. A few edge-case concepts (PULSE, AI) have no ideal match and would need augmentation. | Replace — Recommended Best candidate for a full icon system refresh. Pairs well with the existing clean UI aesthetic. |
| Tabler Score: 35/40 |
Largest library at 5,500+ icons — best coverage for future edge cases. Systematic grid design ensures near-perfect consistency. MIT licensed. Great if the template system expands significantly. | Slightly more technical/engineering aesthetic. Less personality than Heroicons for learner-facing context. Density of options can slow icon selection. | Replace — Alternative Strong choice if library breadth is the top priority. Better fit for complex tools than learner-facing course pages. |
| Phosphor Score: 32/40 |
Unique multi-weight system allows visual hierarchy. Duotone variant adds depth without adding complexity. Strong for branded or premium course experiences. | Duotone at small sizes can reduce legibility, particularly for learners with low vision. Six weight variants increase decision overhead. Less commonly seen in edtech products. | Selective Use Only Consider for marketing or hero moments. Not recommended as the primary icon system for all templates. |
| Multimedia Team Custom Score: TBD |
Maximum brand alignment. Could represent PULSE, Apply AI, and other program-specific concepts precisely. Highest differentiation from competitor products. | Requires design, review, and production time for every icon. Must be maintained in-house. Risk of inconsistency if not governed with a strict style guide. | Phase 2 — Augmentation Only Design custom icons only for concepts with no adequate library equivalent (PULSE, Apply AI, program-specific labels). |
Final Recommendation
Phase 1 — Refresh with Heroicons. Migrate core activity and material icons to Heroicons (outline, 24px). The lighter 1.5px stroke, superior accessibility ratings, and clean geometric style align with the direction of the V2 template system. The transition from Lucide-style icons is straightforward and can be done incrementally by page type.
Phase 2 — Custom icons for program-specific concepts. Commission the Multimedia Team to design a small set of custom icons for concepts that have no satisfactory library equivalent — specifically Apply AI and Apply PULSE. These two icons carry the highest learner recognition requirement and most directly represent UMA’s unique instructional model.
What to avoid: Do not use Phosphor duotone as the primary system. The accessibility risks at 16–20px outweigh the visual benefits in a learner-facing context. Reserve Phosphor for marketing materials or promotional content where larger display sizes mitigate the legibility concern.
This recommendation is based on the evaluation criteria above and the goals of the V2 template system. Final decision subject to review by Gio and the Multimedia Team.