Media & Icons

Axiom01 provides a robust approach to handling media assets and icons, ensuring your visuals are performant, responsive, and visually consistent. Our philosophy emphasizes flexibility, allowing you to choose the best format for your needs while maintaining high quality.

Images

Axiom01 encourages the use of responsive images that adapt to any screen size and lazy loading for improved performance. We recommend modern formats like WebP for optimal compression.

Responsive Images

To make an image responsive, simply add the .responsive-image class. This ensures the image scales within its parent container without overflowing.

<img src="path/to/image.jpg" alt="Description" class="responsive-image">

Lazy Loading

For images below the fold, implement lazy loading to improve initial page load performance. This can be achieved natively with the loading="lazy" attribute or via JavaScript libraries for older browser support.

<img src="path/to/image.jpg" alt="Description" class="responsive-image" loading="lazy">

Icons & SVGs

Integrate scalable vector graphics (SVGs) and icon fonts seamlessly. Axiom01 provides guidance on using icons for accessibility and ensures they scale beautifully without loss of quality.

Icon Fonts (e.g., Font Awesome)

Include the Font Awesome CSS library in your project and use the provided classes to display icons. Always ensure icons have appropriate `aria-hidden` attributes if they are purely decorative, or `aria-label` if they convey meaning without text.

Home

Settings

Favorite

<i class="fas fa-home" aria-hidden="true"></i>
<button aria-label="Delete item"><i class="fas fa-trash" aria-hidden="true"></i></button>

SVGs

Embed SVGs directly into your HTML for maximum control over styling and animation. You can style SVGs using CSS, including currentColor for easy theme integration.

Warning

Check

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="..."/>
</svg>

Accessibility Considerations

For decorative images, ensure alt="" or aria-hidden="true".
For meaningful images, provide descriptive alt text.
For icons, use aria-hidden="true" if purely decorative. If interactive or conveying meaning, provide a text alternative (e.g., visually hidden text, aria-label on parent element).