raccolte di icone svg

on Web Design

20+ raccolte di icone SVG, per tutti i gusti

Iconmelon è un archivio di più di 20 raccolte di icone in formato SVG, pronte per essere scaricate ed utilizzate nei nostri progetti web.

raccolte di icone svg

Icon font

Con la diffusione nel web degli “icon font” si è affermato l’uso delle icone grazie alla loro rinnovata versatilità: diventando vettoriali le icone ora sono più facili da impaginare.

Nonostante questo, gli icon font presentano ancora alcune limitazioni perchè, essendo a tutti gli effetti caratteri di un font, le singole icone devono essere monocromatiche e si possono applicare tramite i fogli di stile solamente gli effetti che riguardano il testo.

Icone SVG

Per questo motivo l’utilizzo di icone in formato SVG ci svincola dai vincoli appena esposti e ci fornisce altre caratteristiche da non sottovalutare:

  • Una resa uniforme tra i vari browser
  • La possibilità di applicare effetti tramite CSS
  • La possibilità di applicare effetti SVG
  • L’eventuale interattività delle icone

oltre appunto a poter essere multicolore.

raccolte di icone svg

Come utilizzare icone SVG

Le icone SVG sono definite tramite markup HTML e il loro codice va inserito subito dopo il tag BODY.


<!doctype html>
<html>
<head>
    <meta charset=utf-8 />
</head>
<body>
  <!-- SVG SOURCE -->
  <svg height="0" width="0" style="position:absolute;margin-left: -100%;">
    <path id="heart-icon" d="M256,465.559c0,0- 239.054-135.345-239.054-291.062c0-159
       .761,224.692-177.574,239.054-7.756 c17.244-169.692,239.054-152.008,239.054,
       7.756C495.054,330.214,256,465.559,256,465.559z"/>
  </svg>
  <!-- SVG SOURCE ends-->
<body>
<html>

Il margin-left: -100% ci garantisce che le icone non vengano (per il momento) visualizzate.

Per poterle ora utilizzare, dobbiamo ricorrere al tag use che clona a tutti gli effetti nel DOM l’icona SVG collegata con l’attributo xlink:


<!doctype html>
<html>
<head>
  <meta charset=utf-8 />
</head>
<body>

<!-- SVG SOURCE —>
...
<!-- SVG SOURCE ends —>

<svg class="icon" viewBox="0 0 32 32">
    <use xlink:href="#heart-icon">
</svg>

</body>
</html>

In questo modo posizioneremo l’icona definita con id #heart-icon nel punto desiderato.

L’icona ora è visibile sulla pagina e si possono applicare gli effetti, le transizioni e le animazioni volute tramite CSS. Le possibilità sono infinite. Per ulteriori informazioni leggete l’ottimo articolo su Tympanus.

scrivi un commento

Commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.