HomeCasa Guida di stile per le icone di un design system
Crea la guida di stile del tuo set di icone: griglia e keyline, spessore del tratto, angoli, dimensioni, metafora per ogni icona, naming, esportazione SVG, accessibilità e checklist. Pensato per ChatGPT, Claude, Gemini e Microsoft Copilot. Include 5 variabili personalizzabili e puoi copiarlo gratuitamente con un clic.
Intermedio · Testo · In attesa di revisione editoriale
Prompt
Agisci come icon designer e responsabile di un design system.
Contesto:
- Prodotto: {{prodotto}}
- Personalità del brand: {{personalita}}
- Stile delle icone: {{stile}}
- Griglia di base: {{griglia}}
- Icone necessarie: {{icone}}
Consegne:
1. 3-5 principi di stile derivati dalla personalità del brand, con esempi di applicazione.
2. Griglia e keyline: dimensione della tavola, area attiva, margine di sicurezza e forme guida (cerchio, quadrato, rettangoli verticale e orizzontale) con le misure.
3. Regole di costruzione: spessore del tratto, raggio degli angoli, terminazioni, angoli consentiti, gestione degli spazi vuoti e dettaglio minimo.
4. Dimensioni d'uso (per esempio 16, 20, 24, 32) e quando serve una versione corretta otticamente.
5. Tabella delle metafore per ogni icona richiesta: metafora proposta, alternativa, rischio di ambiguità o differenze culturali e se deve essere sempre accompagnata da un'etichetta.
6. Naming di file e componenti e regole di esportazione SVG: viewBox, nessun riempimento fisso (currentColor), tratti convertiti o meno secondo il caso, ottimizzazione.
7. Accessibilità: icone decorative o informative, aria-hidden, nome accessibile per i pulsanti con sola icona, contrasto minimo 3:1 e area di tocco di 44-48 px indipendente dalla dimensione dell'icona.
8. Checklist di revisione prima di aggiungere una nuova icona al set.
Vincoli:
- Non copiare né imitare set di icone di terzi; se suggerisci di partire da una libreria open source, ricordami di verificarne la licenza.
- Usa [DA COMPLETARE] per le decisioni di brand non presenti nel contesto.
- Se l'elenco delle icone è ambiguo, chiedimi quale azione rappresenta ciascuna prima di proporre metafore.
Formato: guida con titoli, tabelle di misure e metafore e checklist finale.Come usarlo
- Elenca le icone che ti servono con l’azione o il concetto che rappresentano. 2. Verifica la tabella delle metafore con utenti o con il team di prodotto. 3. Prepara un modello di griglia nel tuo strumento di design con le misure proposte.
Esempio d'uso
Prodotto: app bancaria · Personalità: affidabile e vicina · Stile: contorno con riempimento nello stato attivo · Griglia: 24 px · Icone: bonifico, carta, avvisi, risparmio.
Esempio di risultato
Principi di stile
- Affidabile: forme geometriche stabili, niente tratti inclinati superflui.
- Vicina: angoli arrotondati da 2 px e terminali tondi.
- Semplice: al massimo tre elementi per icona; se ne servono di più, la metafora non funziona.
Griglia e costruzione (24 px)
| Elemento | Misura |
|---|---|
| Canvas | 24 × 24 px |
| Area attiva | 20 × 20 px (2 px di margine) |
| Cerchio guida | Ø 20 px |
| Quadrato guida | 18 × 18 px |
| Tratto | 1,5 px, terminali tondi |
| Raggio angoli | 2 px |
| Stato attivo | Stesso disegno con riempimento pieno |
Tabella delle metafore
| Icona | Metafora | Alternativa | Rischio | Sempre con etichetta? |
|---|---|---|---|---|
| Home | Casa | Griglia | Basso | Sì, nella tab bar |
| Bonifico | Due frecce opposte | Freccia verso una persona | Può sembrare «scambia» | Sì |
| Pagamenti da smartphone | Telefono con onde | Mano con telefono | Onde = Wi-Fi | Sì |
| Risparmio | Salvadanaio | Moneta con freccia in su | Salvadanaio poco universale | Sì |
| Avvisi | Campanella | — | Basso | Pulsante solo icona: nome accessibile |
Esportazione SVG
viewBox="0 0 24 24", nessun riempimento fisso:stroke="currentColor".- Nomi file:
icon-transfer-outline.svg/icon-transfer-filled.svg…
Dati chiave
- Categoria
- Design UI/UX · Design system
- Tipo di output
- Testo
- Livello
- Intermedio
- Pensato per
- ChatGPT, Claude, Gemini e Microsoft Copilot
- Verificato in
- In attesa di verifica editoriale
- Variabili
- Prodotto, Personalità del brand, Stile delle icone, Griglia di base e Icone necessarie
- Lingua
- Italiano
- Prezzo
- Gratuito, senza registrazione
- Aggiornato
- 07/11/2026
Domande frequenti
Quale griglia usare per le icone di interfaccia?
La griglia da 24 px è la più diffusa nelle interfacce, con versioni da 16 o 20 px per gli spazi densi. L’importante è mantenere lo stesso spessore apparente del tratto in tutte le dimensioni.
Le icone hanno sempre bisogno di un’etichetta?
Non sempre, ma le icone poco universali dovrebbero essere accompagnate da testo. I pulsanti con sola icona richiedono almeno un nome accessibile per gli screen reader.
A cosa serve questo prompt?
Crea la guida di stile del tuo set di icone: griglia e keyline, spessore del tratto, angoli, dimensioni, metafora per ogni icona, naming, esportazione SVG, accessibilità e checklist.
Con quali strumenti di IA funziona?
È pensato per ChatGPT, Claude, Gemini e Microsoft Copilot. Non lo abbiamo ancora verificato in questi strumenti, quindi i risultati possono variare da uno all'altro.
Come personalizzo il prompt?
Clicca su «Personalizza» e compila le variabili (Prodotto, Personalità del brand, Stile delle icone, Griglia di base e Icone necessarie). Il testo si aggiorna all'istante e poi puoi copiarlo con un clic. I valori vengono salvati solo nel tuo browser.
Serve esperienza per usarlo?
È di livello intermedio: conviene conoscere l'argomento per fornire un buon contesto e valutare il risultato con occhio critico.
Questo prompt è gratuito?
Sì. Tutti i prompt di HomeCasa Prompts sono gratuiti, senza registrazione né abbonamento. Puoi usarli anche in progetti professionali.
Posso fidarmi dell'output dell'IA?
Consideralo una bozza di alta qualità: verifica sempre dati, cifre e affermazioni importanti prima di pubblicare o prendere decisioni.