Media & Icons

Handle images, icons, and media assets with performance and accessibility in mind.

Media Philosophy

Axiom01 provides a robust approach to handling media assets and icons, ensuring your visuals are performant, responsive, and accessible.

Key Principles

  • Performance First: Optimized loading and modern formats
  • Responsive Design: Images that adapt to any screen size
  • Accessibility: Proper alt text and screen reader support
  • Flexibility: Support for both icon fonts and SVGs

Responsive Images

Axiom01 includes classes for responsive image handling:

Basic Responsive Image

Example screenshot 
<img src="image.jpg" alt="Description" class="responsive-image">

Image in Card

Example in card

Card with Image

Images automatically adapt to their container while maintaining aspect ratio.

Icon System

Axiom01 supports both icon fonts (like Font Awesome) and SVG icons. Choose based on your needs:

Icon Fonts (Font Awesome)

Pros: Easy to use, large library, CSS styling

Cons: Larger bundle size, limited customization

Home
User
Search
Heart

SVG Icons

Pros: Smaller bundles, full customization, better performance

Cons: More setup, need to manage icon library

Custom SVG Star

Icon Usage Examples

Icons in Buttons

<button class="primary">
  <i class="fas fa-download"></i>
  Download
</button>

Icons in Navigation

Accessibility Best Practices

Images

  • Always include descriptive alt text
  • Use empty alt="" for decorative images
  • Consider responsive image needs
  • Test with screen readers

✅ Good

<img src="chart.png" alt="Sales increased 25% in Q3">

❌ Bad

<img src="chart.png" alt="Chart">

Icons

  • Use aria-hidden="true" for decorative icons
  • Provide alternative text for meaningful icons
  • Ensure sufficient color contrast
  • Don't rely on icons alone for meaning

✅ Good

<button>
  <i class="fas fa-download" aria-hidden="true"></i>
  Download
</button>

Performance Optimization

Image Optimization Checklist

  • Format: Use WebP for modern browsers, JPEG/PNG as fallback
  • Compression: Optimize images without visible quality loss
  • Sizing: Serve appropriately sized images for device
  • Lazy Loading: Load images only when needed
  • CDN: Use content delivery networks for faster loading

Icon Performance Tips

  • SVG Sprites: Combine multiple SVGs into a single file
  • Icon Fonts: Load only the icons you need
  • Caching: Set appropriate cache headers
  • Fallbacks: Provide fallbacks for critical icons

Best Practices Summary

✅ Do

  • Use semantic alt text for images
  • Optimize images for web delivery
  • Choose appropriate icon system for your needs
  • Test with assistive technologies
  • Provide fallbacks for critical visuals
  • Use responsive image techniques

❌ Don't

  • Use images for text content
  • Ignore performance implications
  • Rely solely on visual cues
  • Skip accessibility testing
  • Use generic or missing alt text
  • Load unnecessary media assets