Appearance
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
| Resource | URL pattern |
|---|---|
| Icon SVG | https://icons.lewafa.be/icons/{name}.svg |
| Catalog | https://icons.lewafa.be/icon-list.json |
| Documentation | https://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 componentslewicons-static— SVG files innode_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.