Icons, Fonts & Assets

When to use this skill

• Adding icons (SVG, Lucide, FontAwesome).

• Loading custom fonts (Google Fonts, local WOFF2).

• Optimizing images.

1. Icons

• SVG: Prefer inline SVGs or Sprites over font icons for accessibility and performance.

• React: Use libraries like lucide-react or heroicons that treeshake well.

• Attributes: Always set aria-hidden="true" for decorative icons, or providing decent aria-label .

2. Fonts

• Format: Use WOFF2 for local fonts.

• Loading: Use font-display: swap; in CSS to show fallback text immediately.

• Next.js: Use next/font to optimize Google Fonts and eliminate layout shift (CLS).

3. Images

• Formats: Prefer WebP or AVIF over PNG/JPEG.

• Sizing: Always specify width and height attributes (or aspect ratio) to prevent layout shifts.

• Lazy Loading: Use loading="lazy" for below-the-fold images.