Iconography Guidelines
Icon Style
Visual Characteristics:
- Style: Line-based icons with 2px stroke weight
- Corners: Rounded (2px radius) for friendliness
- Grid: 24x24px base grid with 2px padding
- Complexity: Simple, clear, recognizable at small sizes
Icon Sizes
Large (48px) - Hero sections, feature highlights
Medium (32px) - Cards, list items
Standard (24px) - Navigation, inline content
Small (16px) - Labels, tight spaces only
Color Usage
- Primary: Use brand colors for interactive/clickable icons
- Neutral: Charcoal (#333333) for informational icons
- Backgrounds: Icons on colored backgrounds should be white
- Hover states: Darken by 15% or use DYFIA Blue (#2D6DB5)
Usage Rules
- Always maintain consistent stroke weight (2px)
- Keep icons aligned to the pixel grid
- Use icons to support text, not replace it
- Ensure sufficient contrast with backgrounds (4.5:1 minimum)
- Test icons at actual size before finalizing
Icon Library Sources
Recommended icon sets:
- Feather Icons - Clean, minimal line icons
- Heroicons - Modern, professional icon set
- Material Icons - Comprehensive Google icon library
- Custom icons: Follow the same 2px stroke weight and rounded corner style