🎨 Icon Library
Custom SVG icon system for Psilobase. All icons are scalable, accessible, and optimized for web performance.
📖 Implementation Guide
Getting Started
To use mushroom icons in your project:
- Include the mushroom-icons.css stylesheet
- Add the appropriate icon classes to your HTML
- Customize size and color with modifier classes
Class Structure
| Class | Purpose | Example |
|---|---|---|
.mushroom-icon |
Base icon class (required) | |
.icon-{name} |
Specific icon type | |
.mushroom-icon--{size} |
Size modifier (xs, sm, md, lg, xl) | |
.mushroom-icon--{color} |
Color modifier (primary, secondary, etc.) | |
.mushroom-icon--{animation} |
Animation (spin, pulse, bounce) |
Accessibility
All icons are decorative by default. For semantic icons, add appropriate ARIA attributes:
<div class="mushroom-icon icon-safety" role="img" aria-label="Safety warning"></div>Custom Colors
You can override icon colors using CSS custom properties:
.my-custom-icon {
--icon-color: #ff5733;
--icon-stroke-width: 3;
}Performance Tips
- Icons use inline SVG data URLs for optimal performance
- No additional HTTP requests required
- Automatically scales with text size when using relative units
- Respects user's prefers-reduced-motion setting
🌐 Browser Support
All icons work in modern browsers:
- ✅ Chrome/Edge (latest 2 versions)
- ✅ Firefox (latest 2 versions)
- ✅ Safari (latest 2 versions)
- ✅ Mobile browsers (iOS Safari, Chrome Android)
🤝 Contributing New Icons
Want to add new icons to the library? Follow these guidelines:
- Create SVG with 24x24 viewBox
- Use 2px stroke width as default
- Keep paths simple and optimized
- Test in both light and dark modes
- Add to mushroom-icons.css with data URL
- Update icon showcase with new entry
Ready to contribute? Check out our Contributing Guidelines