Unito.it

Tema Unito v2

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:

Icon Title 
<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.

Icon Title Icon Title Icon Title Icon Title Icon Title 
<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.

Icon Title Icon Title 
<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.

Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title 
        <svg role="img" aria-describedby="icon-title" style="fill: yellow" 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>

Allineamenti

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

Icon Title Icon Title Icon Title 
        <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-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-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-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-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-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>
Torna su