---
description: Static files (css, js, and images) for theme templates
globs: assets/*
alwaysApply: false
---
# Assets

The assets directory contains any assets that need to be referenced within a `.liquid` file, usually using the [asset_url](mdc:https:/shopify.dev/docs/api/liquid/filters/asset_url) Liquid filter.

Assets is a flat directory, it may not contain subdirectories.

Any images that are required in the code, including icons, may be stored within assets.  Icons can be used in `.liquid` files via the [inline_asset_content](mdc:https:/shopify.dev/docs/api/liquid/filters/inline_asset_content) Liquid filter.

## SVG Icon Accessibility

All SVG icon files in assets must include `aria-hidden="true"` on the root `<svg>` element:

```svg
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
  <!-- paths -->
</svg>
```

This ensures decorative icons are hidden from screen readers. The accessible name should be provided by the interactive element (button, link) that contains the icon, not by the icon itself.
