Icone
Icone per fornire indicazioni visive immediate sul contenuto
Le icone 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 è consigliabile aggiungere lo >sprite in una cartella locale, ad esempio dist/svg e modificare il path nell’attributo xlink:href come indicato nelle note sull'utilizzo degli SVG
Esempi
Ogni icona può essere inclusa semplicemente creando un tag <svg> con riferimento all’ancora dell'icona desiderata:
<svg role="img" aria-describedby="icon-title" class="icon">
<title id="icon-title">Icon Title</title>
<use xlink:href="./dist/svg/sprite.svg#it-file-csv"></use>
</svg>Dimensioni
Sono disponibili le classi icon-*, dove * può essere xs, sm, lg, xl, per ottenere icone di diverse dimensioni.
<svg role="img" aria-describedby="icon-title" class="bg-light icon icon-xs">
<title id="icon-title">Icon Title</title>
<use xlink:href="./dist/svg/sprite.svg#it-check-circle"></use>
</svg>
<svg role="img" aria-describedby="icon-title" class="bg-light icon icon-sm">
<title id="icon-title">Icon Title</title>
<use xlink:href="./dist/svg/sprite.svg#it-check-circle"></use>
</svg>
<svg role="img" aria-describedby="icon-title" class="bg-light icon">
<title id="icon-title">Icon Title</title>
<use xlink:href="./dist/svg/sprite.svg#it-check-circle"></use>
</svg>
<svg role="img" aria-describedby="icon-title" class="bg-light icon icon-lg">
<title id="icon-title">Icon Title</title>
<use xlink:href="./dist/svg/sprite.svg#it-check-circle"></use>
</svg>
<svg role="img" aria-describedby="icon-title" class="bg-light icon icon-xl">
<title id="icon-title">Icon Title</title>
<use xlink:href="./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 role="img" aria-describedby="icon-title" class="bg-light icon icon-lg icon-padded">
<title id="icon-title">Icon Title</title>
<use xlink:href="./dist/svg/sprite.svg#it-check-circle"></use>
</svg>
<svg role="img" aria-describedby="icon-title" class="bg-light icon icon-xl icon-padded">
<title id="icon-title">Icon Title</title>
<use xlink:href="./dist/svg/sprite.svg#it-check-circle"></use>
</svg>Colori
È anche possibile utilizzare classi come icon-primary per definire il colore dell'icona.
<svg role="img" aria-describedby="icon-title" class="icon icon-primary bg-light"><title id="icon-title">Icon Title</title>
<use xlink:href="./dist/svg/sprite.svg#it-check-circle"></use>
</svg>
<svg role="img" aria-describedby="icon-title" class="icon icon-secondary bg-light"><title id="icon-title">Icon
Title</title>
<use xlink:href="./dist/svg/sprite.svg#it-check-circle"></use>
</svg>
<svg role="img" aria-describedby="icon-title" class="icon icon-success bg-light"><title id="icon-title">Icon
Title</title>
<use xlink:href="./dist/svg/sprite.svg#it-check-circle"></use>
</svg>
<svg role="img" aria-describedby="icon-title" class="icon icon-warning bg-light"><title id="icon-title">Icon
Title</title>
<use xlink:href="./dist/svg/sprite.svg#it-check-circle"></use>
</svg>
<svg role="img" aria-describedby="icon-title" class="icon icon-danger bg-light"><title id="icon-title">Icon
Title</title>
<use xlink:href="./dist/svg/sprite.svg#it-check-circle"></use>
</svg>
<svg role="img" aria-describedby="icon-title" class="icon icon-light bg-dark"><title id="icon-title">Icon
Title</title>
<use xlink:href="./dist/svg/sprite.svg#it-check-circle"></use>
</svg>
<svg role="img" aria-describedby="icon-title" class="icon icon-white bg-dark"><title id="icon-title">Icon
Title</title>
<use xlink:href="./dist/svg/sprite.svg#it-check-circle"></use>
</svg>Su sfondo rosso
Utilizzando la classe negative assieme alla classe icon l'icona viene visualizzata in bianco, su sfondo rosso.
<svg role="img" aria-describedby="icon-title" class="icon negative"><title id="icon-title">Icon Title</title>
<use xlink:href="./dist/svg/sprite.svg#it-check-circle"></use>
</svg>
<svg role="img" aria-describedby="icon-title" class="icon negative"><title id="icon-title">Icon Title</title>
<use xlink:href="./dist/svg/sprite.svg#it-calendar"></use>
</svg>
<svg role="img" aria-describedby="icon-title" class="icon negative"><title id="icon-title">Icon Title</title>
<use xlink:href="./dist/svg/sprite.svg#it-mail"></use>
</svg>Allineamenti
È possibile usare le classi di allineamento per posizionare le icone all’interno di un elemento.
<svg role="img" aria-describedby="icon-title" class="bg-light icon align-bottom"><title id="icon-title">Icon
Title</title>
<use xlink:href="./dist/svg/sprite.svg#it-check-circle"></use>
</svg>
<svg role="img" aria-describedby="icon-title" class="bg-light icon align-middle"><title id="icon-title">Icon
Title</title>
<use xlink:href="./dist/svg/sprite.svg#it-check-circle"></use>
</svg>
<svg role="img" aria-describedby="icon-title" class="bg-light icon align-top"><title id="icon-title">Icon
Title</title>
<use xlink:href="./dist/svg/sprite.svg#it-check-circle"></use>
</svg>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-android
it-android-square
it-apple
it-apple-square
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/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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./dist/svg/sprite.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/sprite.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/sprite.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/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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./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="./dist/svg/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.svg#it-android"></use></svg> it-android
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="./dist/svg/sprite.svg#it-android-square"></use></svg> it-android-square
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="./dist/svg/sprite.svg#it-apple"></use></svg> it-apple
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="./dist/svg/sprite.svg#it-apple-square"></use></svg> it-apple-square
</div>
<div class="col-12 col-md-6 col-lg-4">
<svg class="icon"><use href="./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="./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="./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="./dist/svg/sprite.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/sprite.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/sprite.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/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="./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="./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="./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="./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="./dist/svg/sprite.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/sprite.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/sprite.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/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="./dist/svg/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/sprite.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/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="./dist/svg/sprite.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/sprite.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/sprite.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/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="./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="./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="./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="./dist/svg/sprite.svg#it-team-digitale"></use></svg> it-team-digitale
</div>
</div>