Icone
Le icone sono elementi visivi che contengono simboli: sono cruciali per un'interfaccia di qualità e hanno lo scopo di veicolare informazioni agli utenti in modo rapido e immediato
FondamentiMetadati e link per approfondire
Sei
Designer, Developer, Qui per curiosità
Vuoi
Progettare e sviluppare l'interfaccia utente
A cosa servono
Possono rappresentare funzioni, categorie, opzioni e molto altro, migliorando l'interazione in termini di usabilità e accessibilità. Ciò permette agli utenti di navigare e interagire con l'applicazione o il sito web in modo più intuitivo.
Le icone devono essere facilmente riconoscibili e comprensibili, garantendo un design coerente nell'ambito della soluzione digitale. Ricorda che è buona pratica testare con gli utenti l'immediatezza e la riconoscibilità delle icone.
Come usarle
Usa le icone solo quando è strettamente necessario e per i seguenti casi d'uso:
- Rappresentazione di funzioni: puoi usare le icone per simboleggiare funzioni specifiche dell'interazione come "salva", "cancella" o "invia". È importante usarle in modo consistente nelle varie ricorrenze per evitare di confondere gli utenti.
- Navigazione: le icone possono segnalare percorsi di navigazione, come ad esempio l'icona del menu a hamburger. I simboli delle icone devono essere intuitivi per rendere la navigazione più semplice.
- Categorie di contenuto: le icone possono rappresentare categorie di contenuti, come "video", "immagini" o "documenti". I simboli devono essere facilmente riconoscibili e in linea con il contenuto rappresentato.
- Feedback visivo: puoi usare le icone per fornire feedback visivo, come ad esempio un'icona di caricamento o di successo. È fondamentale usarle nel modo corretto per comunicare chiaramente lo stato dell'azione dell'utente.
- Interazioni: le icone possono rappresentare interazioni quali "mi piace", "condividi" o "commenta". In questo caso i simboli devono essere facilmente comprensibili e azionabili per agevolare l'interazione desiderata dall'utente.
Ti consigliamo di abbinare un'icona a un'etichetta di testo che ne chiarisce la funzione.
Puoi usare l'icona da sola se il simbolo è chiaro e non ambiguo. In questo caso, l'etichetta di testo deve comunque essere leggibile da un lettore di schermo (screen reader).
Le icone disponibili
Le icone sono disponibili nella libreria Bootstrap Italia e in UI kit Italia (Figma).
1<div class="row">
2
3 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-arrow-down">
4 <svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-down"></use></svg> <span>it-arrow-down</span>
5 </div>
6 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-arrow-down-circle">
7 <svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-down-circle"></use></svg> <span>it-arrow-down-circle</span>
8 </div>
9 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-arrow-down-triangle">
10 <svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-down-triangle"></use></svg> <span>it-arrow-down-triangle</span>
11 </div>
12 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-arrow-left">
13 <svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-left"></use></svg> <span>it-arrow-left</span>
14 </div>
15 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-arrow-left-circle">
16 <svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-left-circle"></use></svg> <span>it-arrow-left-circle</span>
17 </div>
18 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-arrow-left-triangle">
19 <svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-left-triangle"></use></svg> <span>it-arrow-left-triangle</span>
20 </div>
21 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-arrow-right">
22 <svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg> <span>it-arrow-right</span>
23 </div>
24 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-arrow-right-circle">
25 <svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right-circle"></use></svg> <span>it-arrow-right-circle</span>
26 </div>
27 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-arrow-right-triangle">
28 <svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right-triangle"></use></svg> <span>it-arrow-right-triangle</span>
29 </div>
30 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-arrow-up">
31 <svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-up"></use></svg> <span>it-arrow-up</span>
32 </div>
33 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-arrow-up-circle">
34 <svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-up-circle"></use></svg> <span>it-arrow-up-circle</span>
35 </div>
36 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-arrow-up-triangle">
37 <svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-up-triangle"></use></svg> <span>it-arrow-up-triangle</span>
38 </div>
39 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-ban">
40 <svg class="icon"><use href="/dist/svg/sprites.svg#it-ban"></use></svg> <span>it-ban</span>
41 </div>
42 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-bookmark">
43 <svg class="icon"><use href="/dist/svg/sprites.svg#it-bookmark"></use></svg> <span>it-bookmark</span>
44 </div>
45 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-box">
46 <svg class="icon"><use href="/dist/svg/sprites.svg#it-box"></use></svg> <span>it-box</span>
47 </div>
48 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-burger">
49 <svg class="icon"><use href="/dist/svg/sprites.svg#it-burger"></use></svg> <span>it-burger</span>
50 </div>
51 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-calendar">
52 <svg class="icon"><use href="/dist/svg/sprites.svg#it-calendar"></use></svg> <span>it-calendar</span>
53 </div>
54 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-camera">
55 <svg class="icon"><use href="/dist/svg/sprites.svg#it-camera"></use></svg> <span>it-camera</span>
56 </div>
57 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-card">
58 <svg class="icon"><use href="/dist/svg/sprites.svg#it-card"></use></svg> <span>it-card</span>
59 </div>
60 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-chart-line">
61 <svg class="icon"><use href="/dist/svg/sprites.svg#it-chart-line"></use></svg> <span>it-chart-line</span>
62 </div>
63 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-check">
64 <svg class="icon"><use href="/dist/svg/sprites.svg#it-check"></use></svg> <span>it-check</span>
65 </div>
66 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-check-circle">
67 <svg class="icon"><use href="/dist/svg/sprites.svg#it-check-circle"></use></svg> <span>it-check-circle</span>
68 </div>
69 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-chevron-left">
70 <svg class="icon"><use href="/dist/svg/sprites.svg#it-chevron-left"></use></svg> <span>it-chevron-left</span>
71 </div>
72 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-chevron-right">
73 <svg class="icon"><use href="/dist/svg/sprites.svg#it-chevron-right"></use></svg> <span>it-chevron-right</span>
74 </div>
75 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-clip">
76 <svg class="icon"><use href="/dist/svg/sprites.svg#it-clip"></use></svg> <span>it-clip</span>
77 </div>
78 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-clock">
79 <svg class="icon"><use href="/dist/svg/sprites.svg#it-clock"></use></svg> <span>it-clock</span>
80 </div>
81 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-close">
82 <svg class="icon"><use href="/dist/svg/sprites.svg#it-close"></use></svg> <span>it-close</span>
83 </div>
84 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-close-big">
85 <svg class="icon"><use href="/dist/svg/sprites.svg#it-close-big"></use></svg> <span>it-close-big</span>
86 </div>
87 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-close-circle">
88 <svg class="icon"><use href="/dist/svg/sprites.svg#it-close-circle"></use></svg> <span>it-close-circle</span>
89 </div>
90 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-code-circle">
91 <svg class="icon"><use href="/dist/svg/sprites.svg#it-code-circle"></use></svg> <span>it-code-circle</span>
92 </div>
93 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-collapse">
94 <svg class="icon"><use href="/dist/svg/sprites.svg#it-collapse"></use></svg> <span>it-collapse</span>
95 </div>
96 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-comment">
97 <svg class="icon"><use href="/dist/svg/sprites.svg#it-comment"></use></svg> <span>it-comment</span>
98 </div>
99 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-copy">
100 <svg class="icon"><use href="/dist/svg/sprites.svg#it-copy"></use></svg> <span>it-copy</span>
101 </div>
102 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-delete">
103 <svg class="icon"><use href="/dist/svg/sprites.svg#it-delete"></use></svg> <span>it-delete</span>
104 </div>
105 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-download">
106 <svg class="icon"><use href="/dist/svg/sprites.svg#it-download"></use></svg> <span>it-download</span>
107 </div>
108 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-error">
109 <svg class="icon"><use href="/dist/svg/sprites.svg#it-error"></use></svg> <span>it-error</span>
110 </div>
111 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-exchange-circle">
112 <svg class="icon"><use href="/dist/svg/sprites.svg#it-exchange-circle"></use></svg> <span>it-exchange-circle</span>
113 </div>
114 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-expand">
115 <svg class="icon"><use href="/dist/svg/sprites.svg#it-expand"></use></svg> <span>it-expand</span>
116 </div>
117 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-external-link">
118 <svg class="icon"><use href="/dist/svg/sprites.svg#it-external-link"></use></svg> <span>it-external-link</span>
119 </div>
120 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-flag">
121 <svg class="icon"><use href="/dist/svg/sprites.svg#it-flag"></use></svg> <span>it-flag</span>
122 </div>
123 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-folder">
124 <svg class="icon"><use href="/dist/svg/sprites.svg#it-folder"></use></svg> <span>it-folder</span>
125 </div>
126 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-fullscreen">
127 <svg class="icon"><use href="/dist/svg/sprites.svg#it-fullscreen"></use></svg> <span>it-fullscreen</span>
128 </div>
129 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-funnel">
130 <svg class="icon"><use href="/dist/svg/sprites.svg#it-funnel"></use></svg> <span>it-funnel</span>
131 </div>
132 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-hearing">
133 <svg class="icon"><use href="/dist/svg/sprites.svg#it-hearing"></use></svg> <span>it-hearing</span>
134 </div>
135 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-help">
136 <svg class="icon"><use href="/dist/svg/sprites.svg#it-help"></use></svg> <span>it-help</span>
137 </div>
138 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-help-circle">
139 <svg class="icon"><use href="/dist/svg/sprites.svg#it-help-circle"></use></svg> <span>it-help-circle</span>
140 </div>
141 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-horn">
142 <svg class="icon"><use href="/dist/svg/sprites.svg#it-horn"></use></svg> <span>it-horn</span>
143 </div>
144 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-inbox">
145 <svg class="icon"><use href="/dist/svg/sprites.svg#it-inbox"></use></svg> <span>it-inbox</span>
146 </div>
147 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-info-circle">
148 <svg class="icon"><use href="/dist/svg/sprites.svg#it-info-circle"></use></svg> <span>it-info-circle</span>
149 </div>
150 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-key">
151 <svg class="icon"><use href="/dist/svg/sprites.svg#it-key"></use></svg> <span>it-key</span>
152 </div>
153 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-link">
154 <svg class="icon"><use href="/dist/svg/sprites.svg#it-link"></use></svg> <span>it-link</span>
155 </div>
156 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-list">
157 <svg class="icon"><use href="/dist/svg/sprites.svg#it-list"></use></svg> <span>it-list</span>
158 </div>
159 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-locked">
160 <svg class="icon"><use href="/dist/svg/sprites.svg#it-locked"></use></svg> <span>it-locked</span>
161 </div>
162 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-logout">
163 <svg class="icon"><use href="/dist/svg/sprites.svg#it-logout"></use></svg> <span>it-logout</span>
164 </div>
165 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-mail">
166 <svg class="icon"><use href="/dist/svg/sprites.svg#it-mail"></use></svg> <span>it-mail</span>
167 </div>
168 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-mail-open">
169 <svg class="icon"><use href="/dist/svg/sprites.svg#it-mail-open"></use></svg> <span>it-mail-open</span>
170 </div>
171 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-map-marker">
172 <svg class="icon"><use href="/dist/svg/sprites.svg#it-map-marker"></use></svg> <span>it-map-marker</span>
173 </div>
174 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-map-marker-circle">
175 <svg class="icon"><use href="/dist/svg/sprites.svg#it-map-marker-circle"></use></svg> <span>it-map-marker-circle</span>
176 </div>
177 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-map-marker-minus">
178 <svg class="icon"><use href="/dist/svg/sprites.svg#it-map-marker-minus"></use></svg> <span>it-map-marker-minus</span>
179 </div>
180 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-map-marker-plus">
181 <svg class="icon"><use href="/dist/svg/sprites.svg#it-map-marker-plus"></use></svg> <span>it-map-marker-plus</span>
182 </div>
183 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-maximize">
184 <svg class="icon"><use href="/dist/svg/sprites.svg#it-maximize"></use></svg> <span>it-maximize</span>
185 </div>
186 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-maximize-alt">
187 <svg class="icon"><use href="/dist/svg/sprites.svg#it-maximize-alt"></use></svg> <span>it-maximize-alt</span>
188 </div>
189 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-minimize">
190 <svg class="icon"><use href="/dist/svg/sprites.svg#it-minimize"></use></svg> <span>it-minimize</span>
191 </div>
192 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-minus">
193 <svg class="icon"><use href="/dist/svg/sprites.svg#it-minus"></use></svg> <span>it-minus</span>
194 </div>
195 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-minus-circle">
196 <svg class="icon"><use href="/dist/svg/sprites.svg#it-minus-circle"></use></svg> <span>it-minus-circle</span>
197 </div>
198 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-more-actions">
199 <svg class="icon"><use href="/dist/svg/sprites.svg#it-more-actions"></use></svg> <span>it-more-actions</span>
200 </div>
201 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-more-items">
202 <svg class="icon"><use href="/dist/svg/sprites.svg#it-more-items"></use></svg> <span>it-more-items</span>
203 </div>
204 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-note">
205 <svg class="icon"><use href="/dist/svg/sprites.svg#it-note"></use></svg> <span>it-note</span>
206 </div>
207 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-open-source">
208 <svg class="icon"><use href="/dist/svg/sprites.svg#it-open-source"></use></svg> <span>it-open-source</span>
209 </div>
210 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-pa">
211 <svg class="icon"><use href="/dist/svg/sprites.svg#it-pa"></use></svg> <span>it-pa</span>
212 </div>
213 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-password-invisible">
214 <svg class="icon"><use href="/dist/svg/sprites.svg#it-password-invisible"></use></svg> <span>it-password-invisible</span>
215 </div>
216 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-password-visible">
217 <svg class="icon"><use href="/dist/svg/sprites.svg#it-password-visible"></use></svg> <span>it-password-visible</span>
218 </div>
219 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-pencil">
220 <svg class="icon"><use href="/dist/svg/sprites.svg#it-pencil"></use></svg> <span>it-pencil</span>
221 </div>
222 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-piattaforme">
223 <svg class="icon"><use href="/dist/svg/sprites.svg#it-piattaforme"></use></svg> <span>it-piattaforme</span>
224 </div>
225 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-pin">
226 <svg class="icon"><use href="/dist/svg/sprites.svg#it-pin"></use></svg> <span>it-pin</span>
227 </div>
228 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-plug">
229 <svg class="icon"><use href="/dist/svg/sprites.svg#it-plug"></use></svg> <span>it-plug</span>
230 </div>
231 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-plus">
232 <svg class="icon"><use href="/dist/svg/sprites.svg#it-plus"></use></svg> <span>it-plus</span>
233 </div>
234 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-plus-circle">
235 <svg class="icon"><use href="/dist/svg/sprites.svg#it-plus-circle"></use></svg> <span>it-plus-circle</span>
236 </div>
237 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-presentation">
238 <svg class="icon"><use href="/dist/svg/sprites.svg#it-presentation"></use></svg> <span>it-presentation</span>
239 </div>
240 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-print">
241 <svg class="icon"><use href="/dist/svg/sprites.svg#it-print"></use></svg> <span>it-print</span>
242 </div>
243 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-refresh">
244 <svg class="icon"><use href="/dist/svg/sprites.svg#it-refresh"></use></svg> <span>it-refresh</span>
245 </div>
246 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-restore">
247 <svg class="icon"><use href="/dist/svg/sprites.svg#it-restore"></use></svg> <span>it-restore</span>
248 </div>
249 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-rss">
250 <svg class="icon"><use href="/dist/svg/sprites.svg#it-rss"></use></svg> <span>it-rss</span>
251 </div>
252 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-rss-square">
253 <svg class="icon"><use href="/dist/svg/sprites.svg#it-rss-square"></use></svg> <span>it-rss-square</span>
254 </div>
255 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-search">
256 <svg class="icon"><use href="/dist/svg/sprites.svg#it-search"></use></svg> <span>it-search</span>
257 </div>
258 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-settings">
259 <svg class="icon"><use href="/dist/svg/sprites.svg#it-settings"></use></svg> <span>it-settings</span>
260 </div>
261 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-share">
262 <svg class="icon"><use href="/dist/svg/sprites.svg#it-share"></use></svg> <span>it-share</span>
263 </div>
264 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-software">
265 <svg class="icon"><use href="/dist/svg/sprites.svg#it-software"></use></svg> <span>it-software</span>
266 </div>
267 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-star-full">
268 <svg class="icon"><use href="/dist/svg/sprites.svg#it-star-full"></use></svg> <span>it-star-full</span>
269 </div>
270 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-star-outline">
271 <svg class="icon"><use href="/dist/svg/sprites.svg#it-star-outline"></use></svg> <span>it-star-outline</span>
272 </div>
273 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-telephone">
274 <svg class="icon"><use href="/dist/svg/sprites.svg#it-telephone"></use></svg> <span>it-telephone</span>
275 </div>
276 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-tool">
277 <svg class="icon"><use href="/dist/svg/sprites.svg#it-tool"></use></svg> <span>it-tool</span>
278 </div>
279 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-unlocked">
280 <svg class="icon"><use href="/dist/svg/sprites.svg#it-unlocked"></use></svg> <span>it-unlocked</span>
281 </div>
282 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-upload">
283 <svg class="icon"><use href="/dist/svg/sprites.svg#it-upload"></use></svg> <span>it-upload</span>
284 </div>
285 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-user">
286 <svg class="icon"><use href="/dist/svg/sprites.svg#it-user"></use></svg> <span>it-user</span>
287 </div>
288 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-video">
289 <svg class="icon"><use href="/dist/svg/sprites.svg#it-video"></use></svg> <span>it-video</span>
290 </div>
291 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-warning">
292 <svg class="icon"><use href="/dist/svg/sprites.svg#it-warning"></use></svg> <span>it-warning</span>
293 </div>
294 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-warning-circle">
295 <svg class="icon"><use href="/dist/svg/sprites.svg#it-warning-circle"></use></svg> <span>it-warning-circle</span>
296 </div>
297 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-wifi">
298 <svg class="icon"><use href="/dist/svg/sprites.svg#it-wifi"></use></svg> <span>it-wifi</span>
299 </div>
300 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-zoom-in">
301 <svg class="icon"><use href="/dist/svg/sprites.svg#it-zoom-in"></use></svg> <span>it-zoom-in</span>
302 </div>
303 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-zoom-out">
304 <svg class="icon"><use href="/dist/svg/sprites.svg#it-zoom-out"></use></svg> <span>it-zoom-out</span>
305 </div>
306</div>
307<h4 class="icon-divider mt-4">File</h4>
308<div class="row">
309
310 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-file">
311 <svg class="icon"><use href="/dist/svg/sprites.svg#it-file"></use></svg> <span>it-file</span>
312 </div>
313 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-files">
314 <svg class="icon"><use href="/dist/svg/sprites.svg#it-files"></use></svg> <span>it-files</span>
315 </div>
316 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-file-audio">
317 <svg class="icon"><use href="/dist/svg/sprites.svg#it-file-audio"></use></svg> <span>it-file-audio</span>
318 </div>
319 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-file-compressed">
320 <svg class="icon"><use href="/dist/svg/sprites.svg#it-file-compressed"></use></svg> <span>it-file-compressed</span>
321 </div>
322 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-file-csv">
323 <svg class="icon"><use href="/dist/svg/sprites.svg#it-file-csv"></use></svg> <span>it-file-csv</span>
324 </div>
325 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-file-json">
326 <svg class="icon"><use href="/dist/svg/sprites.svg#it-file-json"></use></svg> <span>it-file-json</span>
327 </div>
328 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-file-odp">
329 <svg class="icon"><use href="/dist/svg/sprites.svg#it-file-odp"></use></svg> <span>it-file-odp</span>
330 </div>
331 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-file-ods">
332 <svg class="icon"><use href="/dist/svg/sprites.svg#it-file-ods"></use></svg> <span>it-file-ods</span>
333 </div>
334 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-file-odt">
335 <svg class="icon"><use href="/dist/svg/sprites.svg#it-file-odt"></use></svg> <span>it-file-odt</span>
336 </div>
337 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-file-pdf">
338 <svg class="icon"><use href="/dist/svg/sprites.svg#it-file-pdf"></use></svg> <span>it-file-pdf</span>
339 </div>
340 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-file-pdf-ext">
341 <svg class="icon"><use href="/dist/svg/sprites.svg#it-file-pdf-ext"></use></svg> <span>it-file-pdf-ext</span>
342 </div>
343 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-file-ppt">
344 <svg class="icon"><use href="/dist/svg/sprites.svg#it-file-ppt"></use></svg> <span>it-file-ppt</span>
345 </div>
346 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-file-sheet">
347 <svg class="icon"><use href="/dist/svg/sprites.svg#it-file-sheet"></use></svg> <span>it-file-sheet</span>
348 </div>
349 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-file-slides">
350 <svg class="icon"><use href="/dist/svg/sprites.svg#it-file-slides"></use></svg> <span>it-file-slides</span>
351 </div>
352 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-file-txt">
353 <svg class="icon"><use href="/dist/svg/sprites.svg#it-file-txt"></use></svg> <span>it-file-txt</span>
354 </div>
355 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-file-video">
356 <svg class="icon"><use href="/dist/svg/sprites.svg#it-file-video"></use></svg> <span>it-file-video</span>
357 </div>
358 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-file-xml">
359 <svg class="icon"><use href="/dist/svg/sprites.svg#it-file-xml"></use></svg> <span>it-file-xml</span>
360 </div>
361</div>
362<h4 class="icon-divider mt-4">Piattaforme</h4>
363<div class="row">
364
365 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-android">
366 <svg class="icon"><use href="/dist/svg/sprites.svg#it-android"></use></svg> <span>it-android</span>
367 </div>
368 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-android-square">
369 <svg class="icon"><use href="/dist/svg/sprites.svg#it-android-square"></use></svg> <span>it-android-square</span>
370 </div>
371 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-apple">
372 <svg class="icon"><use href="/dist/svg/sprites.svg#it-apple"></use></svg> <span>it-apple</span>
373 </div>
374 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-apple-square">
375 <svg class="icon"><use href="/dist/svg/sprites.svg#it-apple-square"></use></svg> <span>it-apple-square</span>
376 </div>
377 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-behance">
378 <svg class="icon"><use href="/dist/svg/sprites.svg#it-behance"></use></svg> <span>it-behance</span>
379 </div>
380 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-facebook">
381 <svg class="icon"><use href="/dist/svg/sprites.svg#it-facebook"></use></svg> <span>it-facebook</span>
382 </div>
383 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-facebook-square">
384 <svg class="icon"><use href="/dist/svg/sprites.svg#it-facebook-square"></use></svg> <span>it-facebook-square</span>
385 </div>
386 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-figma">
387 <svg class="icon"><use href="/dist/svg/sprites.svg#it-figma"></use></svg> <span>it-figma</span>
388 </div>
389 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-figma-square">
390 <svg class="icon"><use href="/dist/svg/sprites.svg#it-figma-square"></use></svg> <span>it-figma-square</span>
391 </div>
392 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-flickr">
393 <svg class="icon"><use href="/dist/svg/sprites.svg#it-flickr"></use></svg> <span>it-flickr</span>
394 </div>
395 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-flickr-square">
396 <svg class="icon"><use href="/dist/svg/sprites.svg#it-flickr-square"></use></svg> <span>it-flickr-square</span>
397 </div>
398 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-github">
399 <svg class="icon"><use href="/dist/svg/sprites.svg#it-github"></use></svg> <span>it-github</span>
400 </div>
401 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-instagram">
402 <svg class="icon"><use href="/dist/svg/sprites.svg#it-instagram"></use></svg> <span>it-instagram</span>
403 </div>
404 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-linkedin">
405 <svg class="icon"><use href="/dist/svg/sprites.svg#it-linkedin"></use></svg> <span>it-linkedin</span>
406 </div>
407 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-linkedin-square">
408 <svg class="icon"><use href="/dist/svg/sprites.svg#it-linkedin-square"></use></svg> <span>it-linkedin-square</span>
409 </div>
410 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-mastodon">
411 <svg class="icon"><use href="/dist/svg/sprites.svg#it-mastodon"></use></svg> <span>it-mastodon</span>
412 </div>
413 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-mastodon-square">
414 <svg class="icon"><use href="/dist/svg/sprites.svg#it-mastodon-square"></use></svg> <span>it-mastodon-square</span>
415 </div>
416 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-medium">
417 <svg class="icon"><use href="/dist/svg/sprites.svg#it-medium"></use></svg> <span>it-medium</span>
418 </div>
419 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-medium-square">
420 <svg class="icon"><use href="/dist/svg/sprites.svg#it-medium-square"></use></svg> <span>it-medium-square</span>
421 </div>
422 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-moodle">
423 <svg class="icon"><use href="/dist/svg/sprites.svg#it-moodle"></use></svg> <span>it-moodle</span>
424 </div>
425 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-moodle-square">
426 <svg class="icon"><use href="/dist/svg/sprites.svg#it-moodle-square"></use></svg> <span>it-moodle-square</span>
427 </div>
428 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-pinterest">
429 <svg class="icon"><use href="/dist/svg/sprites.svg#it-pinterest"></use></svg> <span>it-pinterest</span>
430 </div>
431 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-pinterest-square">
432 <svg class="icon"><use href="/dist/svg/sprites.svg#it-pinterest-square"></use></svg> <span>it-pinterest-square</span>
433 </div>
434 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-quora">
435 <svg class="icon"><use href="/dist/svg/sprites.svg#it-quora"></use></svg> <span>it-quora</span>
436 </div>
437 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-quora-square">
438 <svg class="icon"><use href="/dist/svg/sprites.svg#it-quora-square"></use></svg> <span>it-quora-square</span>
439 </div>
440 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-reddit">
441 <svg class="icon"><use href="/dist/svg/sprites.svg#it-reddit"></use></svg> <span>it-reddit</span>
442 </div>
443 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-reddit-square">
444 <svg class="icon"><use href="/dist/svg/sprites.svg#it-reddit-square"></use></svg> <span>it-reddit-square</span>
445 </div>
446 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-slack">
447 <svg class="icon"><use href="/dist/svg/sprites.svg#it-slack"></use></svg> <span>it-slack</span>
448 </div>
449 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-slack-square">
450 <svg class="icon"><use href="/dist/svg/sprites.svg#it-slack-square"></use></svg> <span>it-slack-square</span>
451 </div>
452 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-snapchat">
453 <svg class="icon"><use href="/dist/svg/sprites.svg#it-snapchat"></use></svg> <span>it-snapchat</span>
454 </div>
455 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-snapchat-square">
456 <svg class="icon"><use href="/dist/svg/sprites.svg#it-snapchat-square"></use></svg> <span>it-snapchat-square</span>
457 </div>
458 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-stackexchange">
459 <svg class="icon"><use href="/dist/svg/sprites.svg#it-stackexchange"></use></svg> <span>it-stackexchange</span>
460 </div>
461 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-stackexchange-square">
462 <svg class="icon"><use href="/dist/svg/sprites.svg#it-stackexchange-square"></use></svg> <span>it-stackexchange-square</span>
463 </div>
464 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-stackoverflow">
465 <svg class="icon"><use href="/dist/svg/sprites.svg#it-stackoverflow"></use></svg> <span>it-stackoverflow</span>
466 </div>
467 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-stackoverflow-square">
468 <svg class="icon"><use href="/dist/svg/sprites.svg#it-stackoverflow-square"></use></svg> <span>it-stackoverflow-square</span>
469 </div>
470 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-telegram">
471 <svg class="icon"><use href="/dist/svg/sprites.svg#it-telegram"></use></svg> <span>it-telegram</span>
472 </div>
473 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-threads">
474 <svg class="icon"><use href="/dist/svg/sprites.svg#it-threads"></use></svg> <span>it-threads</span>
475 </div>
476 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-threads-square">
477 <svg class="icon"><use href="/dist/svg/sprites.svg#it-threads-square"></use></svg> <span>it-threads-square</span>
478 </div>
479 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-tiktok">
480 <svg class="icon"><use href="/dist/svg/sprites.svg#it-tiktok"></use></svg> <span>it-tiktok</span>
481 </div>
482 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-tiktok-square">
483 <svg class="icon"><use href="/dist/svg/sprites.svg#it-tiktok-square"></use></svg> <span>it-tiktok-square</span>
484 </div>
485 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-twitter">
486 <svg class="icon"><use href="/dist/svg/sprites.svg#it-twitter"></use></svg> <span>it-twitter</span>
487 </div>
488 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-twitter-square">
489 <svg class="icon"><use href="/dist/svg/sprites.svg#it-twitter-square"></use></svg> <span>it-twitter-square</span>
490 </div>
491 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-vimeo">
492 <svg class="icon"><use href="/dist/svg/sprites.svg#it-vimeo"></use></svg> <span>it-vimeo</span>
493 </div>
494 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-vimeo-square">
495 <svg class="icon"><use href="/dist/svg/sprites.svg#it-vimeo-square"></use></svg> <span>it-vimeo-square</span>
496 </div>
497 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-whatsapp">
498 <svg class="icon"><use href="/dist/svg/sprites.svg#it-whatsapp"></use></svg> <span>it-whatsapp</span>
499 </div>
500 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-whatsapp-square">
501 <svg class="icon"><use href="/dist/svg/sprites.svg#it-whatsapp-square"></use></svg> <span>it-whatsapp-square</span>
502 </div>
503 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-youtube">
504 <svg class="icon"><use href="/dist/svg/sprites.svg#it-youtube"></use></svg> <span>it-youtube</span>
505 </div>
506 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-google">
507 <svg class="icon"><use href="/dist/svg/sprites.svg#it-google"></use></svg> <span>it-google</span>
508 </div>
509</div>
510<h4 class="icon-divider mt-4">Extra</h4>
511<div class="row">
512
513 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-designers-italia">
514 <svg class="icon"><use href="/dist/svg/sprites.svg#it-designers-italia"></use></svg> <span>it-designers-italia</span>
515 </div>
516 <div class="container-icon col-12 col-md-6 col-lg-4" id="container-it-team-digitale">
517 <svg class="icon"><use href="/dist/svg/sprites.svg#it-team-digitale"></use></svg> <span>it-team-digitale</span>
518 </div>
519</div>Codice copiato negli appunti
I token per le icone
I design token delle icone appartengono al livello degli "specifici".
| Valore | Descrizione | Token |
|---|---|---|
| Icona nel colore di base | icon.default |
| Icona primaria | icon.primary |
| Icona primario nello stato hover | icon.primary.hover |
| Icona primaria nello stato active | icon.primary.active |
| Icona secondaria | icon.secondary |
| Icona secondaria nello stato hover | icon.secondary.hover |
| Icona secondaria nello stato active | icon.secondary.active |
| Icona di successo | icon.success |
| Icona di successo nello stato hover | icon.success.hover |
| Icona di successo nello stato active | icon.success.active |
| Icona di avviso | icon.warning |
| Icona di avviso nello stato hover | icon.warning.hover |
| Icona di avviso nello stato active | icon.warning.active |
| Icona di errore | icon.error |
| Icona di errore nello stato hover | icon.error.hover |
| Icona di errore nello stato active | icon.error.active |
#1a1a1a
#0066cc
#004d99
#003366
#5C6F82
#2F475E
#17324d
#5C6F82
#006644
#004d33
#995C00
#804D00
#804D00
#CC334D
#992639
#661A26