Skip to main content

Icone

Informazioni e suggerimenti per l’utilizzo di icone con Bootstrap Italia.

Le icone di Bootstrap Italia utilizzano una sprite SVG, che contiene al suo interno tutte le icone, referenziate attraverso il tag <use> attraverso un’àncora.

Per l’utilizzo delle icone è necessario aggiungere la sprite presente nella libreria alla cartella dist/svg e utilizzarla come descritto di seguito, modificandone il path nell’attributo href, a seconda di dove viene copiata la sprite SVG nel proprio ambiente.

Compatibilità con browser meno recenti

L’attributo xlink:href utilizzato nelle precedenti versioni della libreria è stato deprecato dal W3C in favore dell’attributo href. I browser meno recenti non supportano quest’ultimo, come indicato su caniuse.com. Per garantire la piena compatibilità con questi browser è consigliabile utilizzare entrambi gli attributi.

Il primo esempio in pagina utilizza questo approccio.

Approfondisci l’argomento sul sito del W3C WAI-ARIA Authoring Practices e su MDN.

Esempi

Ogni icona può essere inclusa semplicemente creando un tag <svg> con riferimento all’àncora desiderata. In questo primo esempio utilizzeremo sia l’attributo href che xlink:href per compatibilità con i browser obsoleti:

<svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-tool" xlink:href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-tool"></use></svg>

Dimensioni

Sono disponibili le classi icon-*, dove * può essere xs, sm, lg, xl, per ottenere icone di diverse dimensioni.

<svg class="bg-light icon icon-xs"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle"></use></svg>
<svg class="bg-light icon icon-sm"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle"></use></svg>
<svg class="bg-light icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle"></use></svg>
<svg class="bg-light icon icon-lg"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle"></use></svg>
<svg class="bg-light icon icon-xl"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle"></use></svg>

È anche possibile applicare la classe icon-padded all’icona per creare un padding proporzionale alla dimensione dell’icona attorno ad essa.

<svg class="bg-light icon icon-xs icon-padded"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle"></use></svg>
<svg class="bg-light icon icon-sm icon-padded"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle"></use></svg>
<svg class="bg-light icon icon-padded"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle"></use></svg>
<svg class="bg-light icon icon-lg icon-padded"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle"></use></svg>
<svg class="bg-light icon icon-xl icon-padded"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle"></use></svg>

Colori

<svg class="icon icon-primary bg-light"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle"></use></svg>
<svg class="icon icon-secondary bg-light"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle"></use></svg>
<svg class="icon icon-success bg-light"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle"></use></svg>
<svg class="icon icon-warning bg-light"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle"></use></svg>
<svg class="icon icon-danger bg-light"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle"></use></svg>
<svg class="icon icon-light bg-dark"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle"></use></svg>
<svg class="icon icon-white bg-dark"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle"></use></svg>

Allineamenti

È possibile usare le classi di allineamento per posizionare le icone all’interno di un elemento.

<div style="line-height: 4em;">
  <svg class="bg-light icon align-bottom"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle"></use></svg>
  <svg class="bg-light icon align-middle"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle"></use></svg>
  <svg class="bg-light icon align-top"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle"></use></svg>
</div>

Lista delle icone disponibili

it-arrow-down
it-arrow-down-circle
it-arrow-down-triangle
it-arrow-left
it-arrow-left-circle
it-arrow-left-triangle
it-arrow-right
it-arrow-right-circle
it-arrow-right-triangle
it-arrow-up
it-arrow-up-circle
it-arrow-up-triangle
it-ban
it-bookmark
it-box
it-burger
it-calendar
it-camera
it-card
it-chart-line
it-check
it-check-circle
it-chevron-left
it-chevron-right
it-clip
it-clock
it-close
it-close-big
it-close-circle
it-code-circle
it-collapse
it-comment
it-copy
it-delete
it-download
it-error
it-exchange-circle
it-expand
it-external-link
it-file
it-files
it-flag
it-folder
it-fullscreen
it-funnel
it-hearing
it-help
it-help-circle
it-horn
it-inbox
it-info-circle
it-key
it-link
it-list
it-locked
it-mail
it-map-marker
it-map-marker-circle
it-map-marker-minus
it-map-marker-plus
it-maximize
it-maximize-alt
it-minimize
it-minus
it-minus-circle
it-more-actions
it-more-items
it-note
it-open-source
it-pa
it-password-invisible
it-password-visible
it-pencil
it-piattaforme
it-pin
it-plug
it-plus
it-plus-circle
it-presentation
it-print
it-refresh
it-restore
it-rss
it-rss-square
it-search
it-settings
it-share
it-software
it-star-full
it-star-outline
it-telephone
it-tool
it-unlocked
it-upload
it-user
it-video
it-warning
it-warning-circle
it-wifi
it-zoom-in
it-zoom-out

Social

it-behance
it-facebook
it-facebook-square
it-flickr
it-flickr-square
it-github
it-instagram
it-linkedin
it-linkedin-square
it-medium
it-medium-square
it-telegram
it-twitter
it-twitter-square
it-whatsapp
it-whatsapp-square
it-youtube
it-google

Extra

it-designers-italia
it-team-digitale
<div class="row">
  
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-down"></use></svg> it-arrow-down
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-down-circle"></use></svg> it-arrow-down-circle
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-down-triangle"></use></svg> it-arrow-down-triangle
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-left"></use></svg> it-arrow-left
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-left-circle"></use></svg> it-arrow-left-circle
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-left-triangle"></use></svg> it-arrow-left-triangle
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-right"></use></svg> it-arrow-right
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-right-circle"></use></svg> it-arrow-right-circle
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-right-triangle"></use></svg> it-arrow-right-triangle
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-up"></use></svg> it-arrow-up
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-up-circle"></use></svg> it-arrow-up-circle
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-arrow-up-triangle"></use></svg> it-arrow-up-triangle
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-ban"></use></svg> it-ban
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-bookmark"></use></svg> it-bookmark
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-box"></use></svg> it-box
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-burger"></use></svg> it-burger
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-calendar"></use></svg> it-calendar
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-camera"></use></svg> it-camera
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-card"></use></svg> it-card
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-chart-line"></use></svg> it-chart-line
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check"></use></svg> it-check
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-check-circle"></use></svg> it-check-circle
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-chevron-left"></use></svg> it-chevron-left
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-chevron-right"></use></svg> it-chevron-right
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-clip"></use></svg> it-clip
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-clock"></use></svg> it-clock
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-close"></use></svg> it-close
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-close-big"></use></svg> it-close-big
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-close-circle"></use></svg> it-close-circle
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-code-circle"></use></svg> it-code-circle
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-collapse"></use></svg> it-collapse
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-comment"></use></svg> it-comment
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-copy"></use></svg> it-copy
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-delete"></use></svg> it-delete
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-download"></use></svg> it-download
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-error"></use></svg> it-error
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-exchange-circle"></use></svg> it-exchange-circle
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-expand"></use></svg> it-expand
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-external-link"></use></svg> it-external-link
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-file"></use></svg> it-file
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-files"></use></svg> it-files
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-flag"></use></svg> it-flag
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-folder"></use></svg> it-folder
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-fullscreen"></use></svg> it-fullscreen
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-funnel"></use></svg> it-funnel
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-hearing"></use></svg> it-hearing
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-help"></use></svg> it-help
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-help-circle"></use></svg> it-help-circle
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-horn"></use></svg> it-horn
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-inbox"></use></svg> it-inbox
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-info-circle"></use></svg> it-info-circle
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-key"></use></svg> it-key
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-link"></use></svg> it-link
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-list"></use></svg> it-list
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-locked"></use></svg> it-locked
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-mail"></use></svg> it-mail
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-map-marker"></use></svg> it-map-marker
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-map-marker-circle"></use></svg> it-map-marker-circle
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-map-marker-minus"></use></svg> it-map-marker-minus
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-map-marker-plus"></use></svg> it-map-marker-plus
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-maximize"></use></svg> it-maximize
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-maximize-alt"></use></svg> it-maximize-alt
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-minimize"></use></svg> it-minimize
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-minus"></use></svg> it-minus
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-minus-circle"></use></svg> it-minus-circle
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-more-actions"></use></svg> it-more-actions
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-more-items"></use></svg> it-more-items
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-note"></use></svg> it-note
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-open-source"></use></svg> it-open-source
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-pa"></use></svg> it-pa
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-password-invisible"></use></svg> it-password-invisible
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-password-visible"></use></svg> it-password-visible
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-pencil"></use></svg> it-pencil
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-piattaforme"></use></svg> it-piattaforme
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-pin"></use></svg> it-pin
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-plug"></use></svg> it-plug
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-plus"></use></svg> it-plus
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-plus-circle"></use></svg> it-plus-circle
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-presentation"></use></svg> it-presentation
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-print"></use></svg> it-print
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-refresh"></use></svg> it-refresh
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-restore"></use></svg> it-restore
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-rss"></use></svg> it-rss
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-rss-square"></use></svg> it-rss-square
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-search"></use></svg> it-search
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-settings"></use></svg> it-settings
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-share"></use></svg> it-share
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-software"></use></svg> it-software
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-star-full"></use></svg> it-star-full
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-star-outline"></use></svg> it-star-outline
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-telephone"></use></svg> it-telephone
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-tool"></use></svg> it-tool
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-unlocked"></use></svg> it-unlocked
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-upload"></use></svg> it-upload
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-user"></use></svg> it-user
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-video"></use></svg> it-video
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-warning"></use></svg> it-warning
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-warning-circle"></use></svg> it-warning-circle
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-wifi"></use></svg> it-wifi
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-zoom-in"></use></svg> it-zoom-in
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-zoom-out"></use></svg> it-zoom-out
  </div>
</div>
<h4 class="mt-4">Social</h4>
<div class="row">
  
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-behance"></use></svg> it-behance
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-facebook"></use></svg> it-facebook
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-facebook-square"></use></svg> it-facebook-square
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-flickr"></use></svg> it-flickr
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-flickr-square"></use></svg> it-flickr-square
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-github"></use></svg> it-github
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-instagram"></use></svg> it-instagram
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-linkedin"></use></svg> it-linkedin
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-linkedin-square"></use></svg> it-linkedin-square
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-medium"></use></svg> it-medium
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-medium-square"></use></svg> it-medium-square
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-telegram"></use></svg> it-telegram
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-twitter"></use></svg> it-twitter
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-twitter-square"></use></svg> it-twitter-square
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-whatsapp"></use></svg> it-whatsapp
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-whatsapp-square"></use></svg> it-whatsapp-square
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-youtube"></use></svg> it-youtube
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-google"></use></svg> it-google
  </div>
</div>
<h4 class="mt-4">Extra</h4>
<div class="row">
  
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-designers-italia"></use></svg> it-designers-italia
  </div>
  <div class="col-12 col-md-6 col-lg-4">
    <svg class="icon"><use href="/bootstrap-italia/1.x/dist/svg/sprite.svg#it-team-digitale"></use></svg> it-team-digitale
  </div>
</div>