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="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.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="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.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="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.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="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.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="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.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="https://cdn.unito.it/unito-theme/v2/svg/new/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.

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="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.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="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.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="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.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="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.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="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.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="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.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="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.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="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.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="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.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="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.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="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.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="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-check-circle"></use>
            </svg>

Icone disponibili

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

Social

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

            <div class="row">
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-arrow-down"></use></svg> it-arrow-down
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-arrow-down-circle"></use></svg> it-arrow-down-circle
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-arrow-down-triangle"></use></svg> it-arrow-down-triangle
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-arrow-left"></use></svg> it-arrow-left
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-arrow-left-circle"></use></svg> it-arrow-left-circle
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-arrow-left-triangle"></use></svg> it-arrow-left-triangle
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-arrow-right"></use></svg> it-arrow-right
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-arrow-right-circle"></use></svg> it-arrow-right-circle
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-arrow-right-triangle"></use></svg> it-arrow-right-triangle
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-arrow-up"></use></svg> it-arrow-up
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-arrow-up-circle"></use></svg> it-arrow-up-circle
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-arrow-up-triangle"></use></svg> it-arrow-up-triangle
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-ban"></use></svg> it-ban
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-bookmark"></use></svg> it-bookmark
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-box"></use></svg> it-box
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-burger"></use></svg> it-burger
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-calendar"></use></svg> it-calendar
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-camera"></use></svg> it-camera
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-card"></use></svg> it-card
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-chart-line"></use></svg> it-chart-line
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-check"></use></svg> it-check
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-check-circle"></use></svg> it-check-circle
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-chevron-left"></use></svg> it-chevron-left
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-chevron-right"></use></svg> it-chevron-right
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-clip"></use></svg> it-clip
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-clock"></use></svg> it-clock
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-close"></use></svg> it-close
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-close-big"></use></svg> it-close-big
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-close-circle"></use></svg> it-close-circle
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-code-circle"></use></svg> it-code-circle
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-collapse"></use></svg> it-collapse
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-comment"></use></svg> it-comment
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-copy"></use></svg> it-copy
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-delete"></use></svg> it-delete
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-download"></use></svg> it-download
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-error"></use></svg> it-error
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-exchange-circle"></use></svg> it-exchange-circle
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-expand"></use></svg> it-expand
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-external-link"></use></svg> it-external-link
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-file"></use></svg> it-file
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-files"></use></svg> it-files
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-flag"></use></svg> it-flag
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-folder"></use></svg> it-folder
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-fullscreen"></use></svg> it-fullscreen
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-funnel"></use></svg> it-funnel
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-hearing"></use></svg> it-hearing
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-help"></use></svg> it-help
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-help-circle"></use></svg> it-help-circle
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-horn"></use></svg> it-horn
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-inbox"></use></svg> it-inbox
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-info-circle"></use></svg> it-info-circle
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-key"></use></svg> it-key
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-link"></use></svg> it-link
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-list"></use></svg> it-list
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-locked"></use></svg> it-locked
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-mail"></use></svg> it-mail
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-map-marker"></use></svg> it-map-marker
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-map-marker-circle"></use></svg> it-map-marker-circle
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-map-marker-minus"></use></svg> it-map-marker-minus
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-map-marker-plus"></use></svg> it-map-marker-plus
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-maximize"></use></svg> it-maximize
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-maximize-alt"></use></svg> it-maximize-alt
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-minimize"></use></svg> it-minimize
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-minus"></use></svg> it-minus
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-minus-circle"></use></svg> it-minus-circle
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-more-actions"></use></svg> it-more-actions
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-more-items"></use></svg> it-more-items
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-note"></use></svg> it-note
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-open-source"></use></svg> it-open-source
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-pa"></use></svg> it-pa
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-password-invisible"></use></svg> it-password-invisible
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-password-visible"></use></svg> it-password-visible
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-pencil"></use></svg> it-pencil
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-piattaforme"></use></svg> it-piattaforme
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-pin"></use></svg> it-pin
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-plug"></use></svg> it-plug
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-plus"></use></svg> it-plus
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-plus-circle"></use></svg> it-plus-circle
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-presentation"></use></svg> it-presentation
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-print"></use></svg> it-print
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-refresh"></use></svg> it-refresh
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-restore"></use></svg> it-restore
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-rss"></use></svg> it-rss
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-rss-square"></use></svg> it-rss-square
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-search"></use></svg> it-search
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-settings"></use></svg> it-settings
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-share"></use></svg> it-share
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-software"></use></svg> it-software
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-star-full"></use></svg> it-star-full
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-star-outline"></use></svg> it-star-outline
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-telephone"></use></svg> it-telephone
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-tool"></use></svg> it-tool
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-unlocked"></use></svg> it-unlocked
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-upload"></use></svg> it-upload
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-user"></use></svg> it-user
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-video"></use></svg> it-video
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-warning"></use></svg> it-warning
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-warning-circle"></use></svg> it-warning-circle
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-wifi"></use></svg> it-wifi
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-zoom-in"></use></svg> it-zoom-in
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.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 role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-behance"></use></svg> it-behance
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-facebook"></use></svg> it-facebook
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-facebook-square"></use></svg> it-facebook-square
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-flickr"></use></svg> it-flickr
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-flickr-square"></use></svg> it-flickr-square
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-github"></use></svg> it-github
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-instagram"></use></svg> it-instagram
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-linkedin"></use></svg> it-linkedin
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-linkedin-square"></use></svg> it-linkedin-square
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-medium"></use></svg> it-medium
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-medium-square"></use></svg> it-medium-square
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-telegram"></use></svg> it-telegram
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-twitter"></use></svg> it-twitter
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-twitter-square"></use></svg> it-twitter-square
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-whatsapp"></use></svg> it-whatsapp
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-whatsapp-square"></use></svg> it-whatsapp-square
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <svg role="img" aria-describedby="icon-title" class="icon"><title id="icon-title">Icon Title</title><use xlink:href="https://cdn.unito.it/unito-theme/v2/svg/new/sprites.svg#it-youtube"></use></svg> it-youtube
            </div>
        </div>
Torna su