SHOPin Logo
Skip to main documentation content

Icons

How to add SVG icons under apps/presentation/public/icons in the SHOPin storefront accelerator and use them in UI (see Component for where components live).

Add the file

Prepare the SVG

Before committing, make the asset safe to use as a component:

  1. ViewBox — Include a viewBox (e.g. viewBox="0 0 24 24") so scaling stays correct.
  2. No hardcoded size — Drop fixed width / height; size with CSS (e.g. className="size-5").
  3. Color — Prefer currentColor for fill / stroke so utilities like text-gray-700 or token-based classes control color.
  4. Accessibility — For decorative icons, use aria-hidden="true" in markup or at the call site. When the icon carries meaning, expose it to assistive tech (e.g. role="img" and aria-label).

Usage

Icons are imported from the public folder and rendered as components (exact behaviour depends on Next.js / bundler SVG config).

Import:

TSX
import CartIcon from '@/public/icons/cart.svg'

Decorative (purely visual):

TSX
<CartIcon className="size-5 text-gray-700" aria-hidden="true" />

Semantic (meaningful to assistive tech):

TSX
<CartIcon
  className="size-6 text-[hsl(var(--shopin-primary))]"
  role="img"
  aria-label="Cart"
/>
  • Decorative: aria-hidden="true" so screen readers skip the glyph when text or context already explains the control.
  • Semantic: role="img" and aria-label (or equivalent) when the icon alone conveys information.

Storybook

You can use the same @/public/icons/... import pattern in stories under apps/storybook when Storybook’s build treats SVG imports like the presentation app. If imports fail, align Storybook’s webpack/Vite (or framework) config with the presentation app rather than duplicating assets.

Related

Back to Building blocks · Back to How to work with SHOPin