Icone
Informazioni e suggerimenti per l’utilizzo di icone con Bootstrap Italia.
Le icone di Bootstrap Italia utilizzano uno sprite SVG, che contiene al suo interno tutte le icone, referenziate con un’àncora attraverso il tag <use>.
Per l’utilizzo delle icone è necessario aggiungere lo sprite presente nella libreria alla cartella dist/svg e utilizzarlo come descritto di seguito, modificandone il path nell’attributo href, a seconda di dove viene copiato 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="/dist/svg/sprites.svg#it-tool" xlink:href="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-check-circle"></use></svg>
<svg class="bg-light icon icon-sm"><use href="/dist/svg/sprites.svg#it-check-circle"></use></svg>
<svg class="bg-light icon"><use href="/dist/svg/sprites.svg#it-check-circle"></use></svg>
<svg class="bg-light icon icon-lg"><use href="/dist/svg/sprites.svg#it-check-circle"></use></svg>
<svg class="bg-light icon icon-xl"><use href="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-check-circle"></use></svg>
<svg class="bg-light icon icon-sm icon-padded"><use href="/dist/svg/sprites.svg#it-check-circle"></use></svg>
<svg class="bg-light icon icon-padded"><use href="/dist/svg/sprites.svg#it-check-circle"></use></svg>
<svg class="bg-light icon icon-lg icon-padded"><use href="/dist/svg/sprites.svg#it-check-circle"></use></svg>
<svg class="bg-light icon icon-xl icon-padded"><use href="/dist/svg/sprites.svg#it-check-circle"></use></svg>Colori
<svg class="icon icon-primary bg-light"><use href="/dist/svg/sprites.svg#it-check-circle"></use></svg>
<svg class="icon icon-secondary bg-light"><use href="/dist/svg/sprites.svg#it-check-circle"></use></svg>
<svg class="icon icon-success bg-light"><use href="/dist/svg/sprites.svg#it-check-circle"></use></svg>
<svg class="icon icon-warning bg-light"><use href="/dist/svg/sprites.svg#it-check-circle"></use></svg>
<svg class="icon icon-danger bg-light"><use href="/dist/svg/sprites.svg#it-check-circle"></use></svg>
<svg class="icon icon-light bg-dark"><use href="/dist/svg/sprites.svg#it-check-circle"></use></svg>
<svg class="icon icon-white bg-dark"><use href="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-check-circle"></use></svg>
<svg class="bg-light icon align-middle"><use href="/dist/svg/sprites.svg#it-check-circle"></use></svg>
<svg class="bg-light icon align-top"><use href="/dist/svg/sprites.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-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-logout
it-mail
it-mail-open
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
File
it-file
it-files
it-file-audio
it-file-compressed
it-file-csv
it-file-json
it-file-odp
it-file-ods
it-file-odt
it-file-pdf
it-file-pdf-ext
it-file-ppt
it-file-sheet
it-file-slides
it-file-txt
it-file-video
it-file-xml
Piattaforme
it-behance
it-facebook
it-facebook-square
it-figma
it-figma-square
it-flickr
it-flickr-square
it-github
it-instagram
it-linkedin
it-linkedin-square
it-mastodon
it-mastodon-square
it-medium
it-medium-square
it-moodle
it-moodle-square
it-pinterest
it-pinterest-square
it-quora
it-quora-square
it-reddit
it-reddit-square
it-slack
it-slack-square
it-snapchat
it-snapchat-square
it-stackexchange
it-stackexchange-square
it-stackoverflow
it-stackoverflow-square
it-telegram
it-tiktok
it-tiktok-square
it-twitter
it-twitter-square
it-vimeo
it-vimeo-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="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-ban"></use></svg> it-ban
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-bookmark"></use></svg> it-bookmark
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-box"></use></svg> it-box
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-burger"></use></svg> it-burger
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-calendar"></use></svg> it-calendar
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-camera"></use></svg> it-camera
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-card"></use></svg> it-card
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-check"></use></svg> it-check
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-clip"></use></svg> it-clip
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-clock"></use></svg> it-clock
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-close"></use></svg> it-close
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-collapse"></use></svg> it-collapse
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-comment"></use></svg> it-comment
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-copy"></use></svg> it-copy
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-delete"></use></svg> it-delete
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-download"></use></svg> it-download
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-error"></use></svg> it-error
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-expand"></use></svg> it-expand
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-flag"></use></svg> it-flag
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-folder"></use></svg> it-folder
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-fullscreen"></use></svg> it-fullscreen
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-funnel"></use></svg> it-funnel
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-hearing"></use></svg> it-hearing
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-help"></use></svg> it-help
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-horn"></use></svg> it-horn
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-inbox"></use></svg> it-inbox
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-key"></use></svg> it-key
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-link"></use></svg> it-link
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-list"></use></svg> it-list
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-locked"></use></svg> it-locked
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-logout"></use></svg> it-logout
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-mail"></use></svg> it-mail
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-mail-open"></use></svg> it-mail-open
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-maximize"></use></svg> it-maximize
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-minimize"></use></svg> it-minimize
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-minus"></use></svg> it-minus
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-note"></use></svg> it-note
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-pa"></use></svg> it-pa
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-pencil"></use></svg> it-pencil
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-piattaforme"></use></svg> it-piattaforme
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-pin"></use></svg> it-pin
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-plug"></use></svg> it-plug
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-plus"></use></svg> it-plus
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-presentation"></use></svg> it-presentation
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-print"></use></svg> it-print
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-refresh"></use></svg> it-refresh
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-restore"></use></svg> it-restore
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-rss"></use></svg> it-rss
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-search"></use></svg> it-search
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-settings"></use></svg> it-settings
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-share"></use></svg> it-share
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-software"></use></svg> it-software
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-telephone"></use></svg> it-telephone
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-tool"></use></svg> it-tool
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-unlocked"></use></svg> it-unlocked
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-upload"></use></svg> it-upload
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-user"></use></svg> it-user
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-video"></use></svg> it-video
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-warning"></use></svg> it-warning
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-wifi"></use></svg> it-wifi
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-zoom-out"></use></svg> it-zoom-out
</div>
</div>
<h4 class="mt-4">File</h4>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-file"></use></svg> it-file
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-files"></use></svg> it-files
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-file-audio"></use></svg> it-file-audio
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-file-compressed"></use></svg> it-file-compressed
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-file-csv"></use></svg> it-file-csv
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-file-json"></use></svg> it-file-json
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-file-odp"></use></svg> it-file-odp
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-file-ods"></use></svg> it-file-ods
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-file-odt"></use></svg> it-file-odt
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-file-pdf"></use></svg> it-file-pdf
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-file-pdf-ext"></use></svg> it-file-pdf-ext
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-file-ppt"></use></svg> it-file-ppt
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-file-sheet"></use></svg> it-file-sheet
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-file-slides"></use></svg> it-file-slides
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-file-txt"></use></svg> it-file-txt
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-file-video"></use></svg> it-file-video
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-file-xml"></use></svg> it-file-xml
</div>
</div>
<h4 class="mt-4">Piattaforme</h4>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-behance"></use></svg> it-behance
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-facebook"></use></svg> it-facebook
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-figma"></use></svg> it-figma
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-figma-square"></use></svg> it-figma-square
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-flickr"></use></svg> it-flickr
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-github"></use></svg> it-github
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-instagram"></use></svg> it-instagram
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-linkedin"></use></svg> it-linkedin
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-mastodon"></use></svg> it-mastodon
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-mastodon-square"></use></svg> it-mastodon-square
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-medium"></use></svg> it-medium
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-moodle"></use></svg> it-moodle
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-moodle-square"></use></svg> it-moodle-square
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-pinterest"></use></svg> it-pinterest
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-pinterest-square"></use></svg> it-pinterest-square
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-quora"></use></svg> it-quora
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-quora-square"></use></svg> it-quora-square
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-reddit"></use></svg> it-reddit
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-reddit-square"></use></svg> it-reddit-square
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-slack"></use></svg> it-slack
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-slack-square"></use></svg> it-slack-square
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-snapchat"></use></svg> it-snapchat
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-snapchat-square"></use></svg> it-snapchat-square
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-stackexchange"></use></svg> it-stackexchange
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-stackexchange-square"></use></svg> it-stackexchange-square
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-stackoverflow"></use></svg> it-stackoverflow
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-stackoverflow-square"></use></svg> it-stackoverflow-square
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-telegram"></use></svg> it-telegram
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-tiktok"></use></svg> it-tiktok
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-tiktok-square"></use></svg> it-tiktok-square
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-twitter"></use></svg> it-twitter
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-vimeo"></use></svg> it-vimeo
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-vimeo-square"></use></svg> it-vimeo-square
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.svg#it-whatsapp"></use></svg> it-whatsapp
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-youtube"></use></svg> it-youtube
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="/dist/svg/sprites.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="/dist/svg/sprites.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="/dist/svg/sprites.svg#it-team-digitale"></use></svg> it-team-digitale
</div>
</div>