Icone SVG per il Design UI: La Guida Completa 2026

Perché le icone SVG sono l'unica scelta seria per UI in produzione

Gli icon font hanno avuto il loro momento. Gli sprite PNG anche. Entrambi sono punti deboli in qualsiasi design system che deve scalare tra breakpoint, temi colore e requisiti di accessibilità. Le icone SVG sono l'unica scelta architetturalmente solida per team che consegnano interfacce in produzione.

Un'icona SVG è un nodo DOM di prima classe. Risponde alle proprietà CSS custom, partecipa all'albero di accessibilità, scala senza perdita di qualità e si anima con transizioni CSS standard.

"

Le icone sono il vocabolario di un'interfaccia utente. Se il vocabolario è sbagliato, ogni frase che il prodotto pronuncia diventa confusa.

Principi di design delle icone: griglia, tratto e consistenza ottica

Lo standard della griglia 24×24

Ogni icona in un sistema coerente inizia sullo stesso canvas. La griglia di 24×24 pixel si divide uniformemente nelle dimensioni comuni (12, 16, 20, 48) e si allinea a una sotto-griglia di 1 px.

Consistenza del tratto e peso visivo

Un tratto di 2 px a 24×24 scala in modo prevedibile: a 16 px diventa ~1,33 px (nitido su display 2x), a 48 px diventa 4 px.

• Uno spessore di tratto per set. Scegli 1,5 px o 2 px e applicalo globalmente.
• Stili di estremo e giunzione consistenti. Estremi arrotondati vanno con giunzioni arrotondate. Mai mescolare.
• Correzione ottica per le curve. Un cerchio di 20 px sembra più piccolo di un quadrato di 20 px — regola a 20,5 px.

Architettura del sistema di icone SVG

Pattern SVG Sprite

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-check" viewBox="0 0 24 24">
    <polyline points="20,6 9,17 4,12" fill="none"
      stroke="currentColor" stroke-width="2"/>
  </symbol>
</svg>

<svg width="24" height="24" aria-hidden="true">
  <use href="#icon-check"/>
</svg>

Pattern Componente React

interface IconProps extends React.SVGProps<SVGSVGElement> {
  size?: number;
  label?: string;
}

export function CheckIcon({ size = 24, label, ...props }: IconProps) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24"
      fill="none" stroke="currentColor" strokeWidth={2}
      role={label ? 'img' : undefined}
      aria-label={label} aria-hidden={label ? undefined : true}
      {...props}>
      <polyline points="20,6 9,17 4,12" />
    </svg>
  );
}

Requisiti di accessibilità

Ogni icona SVG è decorativa o significativa. Ciascuna ha un'implementazione non negoziabile.

Decorativa (accanto a testo visibile — nascondere dai lettori di schermo):

<button>
  <svg aria-hidden="true" focusable="false"><!-- icona --></svg>
  Salva documento
</button>

Significativa (unico elemento interattivo — deve annunciarsi):

<button aria-label="Chiudi finestra di dialogo">
  <svg role="img" aria-labelledby="close-title" focusable="false">
    <title id="close-title">Chiudi</title>
    <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2"/>
  </svg>
</button>

Dark mode e tematizzazione con proprietà CSS custom

:root {
  --icon-color-primary: #1a1a2e;
  --icon-color-success: #059669;
  --icon-size-md: 24px;
  --icon-stroke: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --icon-color-primary: #e5e7eb;
    --icon-color-success: #34d399;
  }
}

.icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  stroke: var(--icon-color-primary);
  stroke-width: var(--icon-stroke);
  transition: stroke 0.2s ease;
}

Passare al dark mode è un cambio zero codice icone. I token si aggiornano e ogni icona segue.

Ottimizzazione delle prestazioni

Passa ogni icona nell'ottimizzatore SVG di VectoSolve o SVGO prima di fare commit. Un'icona 24×24 tipica dovrebbe pesare tra 200 e 500 byte dopo l'ottimizzazione.

• SVG inline per icone critiche above-the-fold. Zero overhead di rete.
• Sprite sheet esterno per icone below-the-fold. Una richiesta, cache lungo.
• import() dinamico per icone raramente viste.

Imposta sempre width e height espliciti sugli elementi SVG per evitare il Cumulative Layout Shift (CLS).

Workflow di esportazione Figma-a-SVG

1. Organizzare in Figma. Pagina dedicata alle icone con frame 24×24 nominati icon/check, icon/alert-triangle, ecc.
2. Appiattire e vettorializzare. Appiattisci i gruppi booleani e vettorializza i tratti prima dell'esportazione.
3. Esportare come SVG. Usa l'esportazione nativa di Figma con "Outline text" attivo e "Include id" disattivato.
4. Ottimizzare. Passa nell'ottimizzatore VectoSolve per rimuovere metadati e ridurre la precisione.
5. Validare. Conferma che i tracciati si renderizzano correttamente a 16, 24 e 48 px.
6. Generare componenti. Usa SVGR o uno script custom per convertire SVG in componenti framework.

Animazione delle icone e micro-interazioni

Animazione di tracciamento

.icon-check polyline {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.25s cubic-bezier(0.65, 0, 0.35, 1);
}
.checkbox:checked + .icon-check polyline {
  stroke-dashoffset: 0;
}

Rotazione e morphing

.icon-loading { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

Costruisci il tuo sistema di icone oggi

VectoSolve fornisce strumenti per convertire, ottimizzare e modificare icone SVG in ogni fase — dalla conversione raster a vettore all'ottimizzazione SVG e all'editing SVG in tempo reale. Il tuo sistema di icone è il vocabolario che il tuo prodotto usa per comunicare.

Fonti e approfondimenti

• MDN Web Docs: SVG Icons — Riferimento tecnico per elementi SVG, ruoli ARIA e markup di icone accessibili
• CSS-Tricks: SVG Icon Systems — Guida completa per costruire sprite sheet SVG e librerie di componenti icone
• web.dev: Web Performance — Best practice Google per caricare e renderizzare asset di icone efficientemente
• Smashing Magazine: Icon Design — Principi di design UI per sistemi di icone consistenti e pixel-perfect