Skip to content

CDN usage

Production hosting is on Vercel at icons.lewafa.be. Icons are served as static SVGs with long-lived cache headers and CORS enabled for cross-site fetch().

URLs

ResourceURL pattern
Icon SVGhttps://icons.lewafa.be/icons/{name}.svg
Cataloghttps://icons.lewafa.be/icon-list.json
Documentationhttps://icons.lewafa.be/

Example: https://icons.lewafa.be/icons/user.svg

Deploys from the main branch update these URLs. There is no version prefix in the path for v0.1; pin by deploy date or use npm (lewicons-static) if you need semver.

HTML image

Works on any public site without CORS configuration:

html
<img
  src="https://icons.lewafa.be/icons/bicycle.svg"
  alt=""
  width="24"
  height="24"
/>

CSS mask (currentColor)

css
.icon-bicycle {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  mask: url('https://icons.lewafa.be/icons/bicycle.svg') center / contain no-repeat;
}

Inline SVG via fetch

CORS is set to * for /icons/*.svg, so you can fetch and inject markup:

js
const res = await fetch('https://icons.lewafa.be/icons/user.svg');
const svg = await res.text();
// inject into DOM (sanitize if user-controlled)

Catalog JSON

js
const list = await fetch('https://icons.lewafa.be/icon-list.json').then((r) =>
  r.json(),
);
// [{ name, tags, categories, aliases }, ...]

npm alternative

For bundled apps, prefer packages:

  • lewicons-react — React components
  • lewicons-static — SVG files in node_modules

CDN hotlinking is best for marketing sites, emails, or stacks where you do not want a build-time dependency.

Caching

  • SVGs: Cache-Control: public, max-age=31536000, immutable
  • icon-list.json: 1 hour

After adding or renaming icons, merge to main and wait for the Vercel deploy to complete.