...
| Innehållsförteckning |
|---|
...
Ikoner
| Status | ||||
|---|---|---|---|---|
|
...
Ineras ikonbibliotek är framtaget för att tillhandahålla tydliga ikoner som kännetecknar Ineras varumärkesprofil. Tjänster under Ineras varumärke använder primärt dessa varumärkesspecifika och egenritade ikoner. Ikonbiblioteken för varumärkena Inera och 1177 Vårdguiden innehåller samma grundikoner, men med respektive profilfärger.
Ikoner är primärt mörkturkosa. Inaktiva ikoner är ljusgrå.
...
Grid och specifikation
40 x 40 px arbetsyta
1.5 px linjetjocklek
2 px hörnradie
Linjens ändar ska vara rundade
Avskurna linjer behöver inte ha rundat avslut
Använd samma färg på hela ikonen.
Undantag - övriga ikoner
Varumärkesspecifika ikoner ska alltid användas i första hand, men i vissa specifika fall kan ikoner från Googles Material Design användas. Det gäller exempelvis om ett större antal ikoner snabbt behöver tas fram och det inte finns möjlighet eller budget för att ta fram nya varumärkesspecifika ikoner. I dessa fall hänvisar vi till Google material designs ikonbibliotek. Använd koner med ramlinje (ej fyllda).
Google Material design ikonbibliotek
...
Stäm av med UX-ramverket om dessa ska användas.
Exempel (ska uppdateras)
| Status | ||||
|---|---|---|---|---|
|
Några exempel på hur vi använder ikoner med hjälp av Fontello eller som SVG filer inbäddade i CSS koden.
| Iframe | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
Do’s and Don’ts
Använd primärt ikoner hämtade från https://designmodo.com/linecons-free/ eller egenritade ikoner.från Ineras ikonbibliotek.
Tillgänglighet
Även för ikoner, som utgör en form av grafiskt element på sidan, gäller samma kriterier som för bilder generellt under WCAG 2.1 Nivå AA. Se riktlinjer under Tillgänglighet.
Alternativ text (ALT-text) när ikonen saknar kompletterande text.
Tillräcklig storlek för en klickbar yta (om ikonen är klickbar)
Tillräcklig kontrast mellan ikon och bakomliggande element
Material
Ikoner
Här finns en samling av de ikoner som används på Inera.se i svg och png. (Finns även i Sketchbiblioteket)ikonerna i Ineras ikonbibliotek utsparade i svg:
| View file | ||
|---|---|---|
|
Övriga ikoner
Här hittar du ikoner från Google Material designs ikonbibliotek:
Google Material design ikonbibliotek
Research på komponenten
-
Relaterade resurser/komponenter
SketchbiblioteketKomponentbiblioteken i Figma/Sketch
Status
Status |
|
|---|
| ||
Publicerad | 2020-01-18 | |
|---|---|---|
Senast uppdaterad | 2020-01-20 |