Icon System
Scalable SVG icons with accessibility features for the Fondation Botnar Dashboard
Total Icons
Categories
WCAG
Accessible
SVG
Format
Interactive Icon Preview
Selected Icon
Category:
Usage:
Customization
HTML Code
Usage Guidelines
Accessibility Best Practices
- • Use aria-label for standalone icons
- • Add role="img" for decorative icons
- • Ensure 24px minimum touch target
- • Provide alternative text descriptions
- • Use semantic HTML with icons
- • Test with screen readers
Implementation Guidelines
- • Use consistent icon sizes across contexts
- • Apply text colors for icon coloring
- • Maintain 1:1 aspect ratio
- • Use SVG format for scalability
- • Follow naming conventions
- • Test across different themes