Icons
- Johanna Grahn Hollström (Unlicensed)
- Måns Hermansson
- Johanna.Grahn.Hollstrom (Deactivated)
Ikoner är visuella, grafiska symboler som används för att för att enskilt eller tillsammans med text förmedla ett budskap.
Innehållsförteckning
Komponentkällor
1177
Inera
Designspecifikation
Ikonbiblioteket är framtaget för att tillhandahålla tydliga ikoner som kännetecknar Ineras och 1177:s varumärkesprofiler. Tjänster under Ineras och 1177:s varumärken använder primärt dessa varumärkesspecifika och egenritade ikoner. Ikonbiblioteken för varumärkena Inera och 1177 innehåller samma grundikoner, men med respektive profilfärger. I ikonbiblioteket ingår också samtliga regioners logotyper som egna ikoner.
Ikonernas olika färger kan väljas i högermenyn i Figma.
Använd ikoner som ett grafiskt komplement till text och undvik att låta ikonen vara det enda informationsbärande elementet.
Storlekar
Ikonerna i IDS finns som ikonfont, ”Inera-Design-Icons” och kan användas i text. Ikonerna kan sättas i den storlek man behöver. Instruktioner för hur man använder ikonfonten finns i komponentkällorna. Ikonerna finns även i svg-format.
Några av våra ikoner finns i en ”small-version”. Det är ikoner anpassade till att användas i storlek 16 px eller mindre. För ikoner större än 16 px används den ordinarie ikonversionen.
Ikoner används sällan fristående som knappar, men skulle så vara fallet får man se till att klickytan är minst 24 x 24 px.
Friyta
Vi har i UX-ramverket tagit bort friyta/padding runt ikonerna. Arbetsytan som ikonerna ligger i är dock alltid konstant även om ikonen inte fyller ut bredden eller höjden.
Att vi valt att ta bort friytan/padding beror på att våra utvecklare vill arbeta med ikonerna utan friyta samt att det är lättare att placera och linjera ikoner med andra element.
Grid och design
Nya ikoner skapas i storlek 40 x 40 px
Linjetjocklek: 2 px
2 px hörnradie
Linjens ändar ska vara rundade
Avskurna linjer behöver inte alltid ha rundat avslut
Färger enligt varumärke, den enda ikon som har fast färg är “shield locked filled” som är röd.
Historik
I UX-ramverkets begynnelse hade våra ikoner friyta/padding, total storlek 44 x 44 px och arbetsytan (live area) var 40 x 40 px. Då vi tog beslutet att ta bort friytan valde vi att behålla ikonerna i deras aktuella storlek 40 x 40 px - enklaste lösningen vilket gav samma utseende som tidigare. Under 2024 tog vi beslutet att justera samtliga ikoner till enfärgade för 1177. Under 2025 skapades en ikonfont där samtliga ikoner ingår - ”Inera-Design-Icons”.
Specifikt för 1177
Använd färgen ”Primary/40” för de röda ikonerna, ”color/navigation/text-default” enligt tokensystemet
Använd färgen ”Accent/40” för de blå ikonerna, ”color/interactive/text-default” enligt tokensystemet
Använd färgen ”Neutral/20” för de grå ikonerna, ”color/surface/text-on-default” enligt tokensystemet
Röd: Används främst för navigationselement i ramverket, dvs i sajthuvud (navigation) eller i sajtfoten (stödlänkar)
Blå: Används för ikoner vid länkar eller till funktioner med call to action som knappar etc.
Grå: Används till ikoner som är informativa och inte har någon call to action. Dvs. som inte tillhör navigationselement, är länkade eller knutna till en funktion. (Undantag: förstoringsikon på bilder).
Exempel:
Ikonen användare finns här i röd, blå och grå variant. Röd används för inloggningsfunktion som är placerad i ramverket/sidhuvud. Blå används om exempelvis en knapp för inloggning är placerad på sidan i innehållet. Grå används t.ex om inloggningsfunktionen har status “disabled” eller om det handlar om information om inloggning och inte är klickbart.
Se även Varumärkesmanualen för 1177 - grafiska element.
Specifikt för Inera
Ikoner är primärt gröna i färgen ”Accent/40”, ”color/interactive/text-default” enligt tokensystemet
Icon Font
Samtliga ikoner finns som ikonfont och kan användas i text. För att använda ikonfonten skriver du in namnet på ikonen och ändrar fonten till “Inera-Design-Icons”.
Användningsområde för dessa ikoner kan exempelvis vara när en extern länk-ikon ska presenteras i löptext tillsammans med en länk.
Instruktioner för hur man använder ikonfonten finns i komponentkällorna (Figma och Storybook).
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 ikoner med ramlinje (ej fyllda).
Google Material Design - ikonbibliotek
Om ni saknar ikoner och behöver få hjälp att ta fram varumärkesspecifika sådana är det enklaste sättet att höra av er till UX-ramverket med ert önskemål.
Utgå från nedan färger om ni använder ikoner från Material Design:
Varumärke | Färg |
|---|---|
1177 |
|
Inera |
|
Tillgänglighet
Om en ikon/grafiskt element används i samband med en länk:
För att öka klickbara ytan så kan man även göra en enda länk av ikon och texten i en sammansatt länk. Gör ikoner som är en del av navigeringen klickbara. När du kombinerar text och bildelement i till exempel menyalternativ bör både texten och bilden vara klickbar.
För mer information läs: Gör länkar, klickbara ytor och menyer användbara för alla - Vägledning för webbutveckling
Allt innehåll som inte är text, som presenteras för användaren ska ha ett textalternativ (alt=”ett textalternativ”) som förklarar det grafiska objektet. Är det enbart en dekorativbild som inte ger någon form av information så kan en tom alt-text sättas istället. Skulle det finnas en text intill en ikon som redan förklarar ikonen så kan även denna få en tom alt-text då det kan upplevas upprepande för användare med skärmläsare.
Komponenter som har samma funktionalitet inom en uppsättning av webbsidor identifieras konsekvent. (Nivå AA) Konsekvent benämning av saker på hela webbplatsen underlättar för alla användare att känna igen sig och minskar onödig kognitiv belastning. Var konsekvent när du beskriver och namnger samma funktionalitet på olika sidor och skärmar. Det innebär till exempel att rubriker, etiketter, ikoner och alternativtexter som ska beskriva en skicka-knapp ska heta samma sak på hela webbplatsen. Inte Skicka på en sida och Sänd på en annan sida. Eller att en spara-ikon ska se likadan ut på hela webbplatsen.
Använd tillräckliga kontraster i komponenter och grafiska element: Minst 3.0 i kontrastvärde.
Använd tillräcklig kontrast mellan text och bakgrund: Minst 4.5 i kontrast för liten text (inklusive länk-texter) och 3.0 för stor text (exempelvis rubriker).
Tangentbord: All funktionalitet är hanterbar via ett gränssnitt för tangentbord utan att det krävs särskild timing för varje enskild tangenttryckning. Om det är ett interaktivt element så ska användare med tangentbord kunna nå den. (Nivå A)
Markera tydligt vilket fält eller element som är i fokus: Obs! Detta är ifall ikonen är interaktiv. Den som navigerar med t.ex. tab-tangenten behöver få veta var fokus ligger. Standardmarkeringen är ofta en tunn linje som är svår att se.Gör markeringen tydlig med tillräckligt hög kontrast 3.0:1. (Nivå AA)
Ikoner i SVG
Här finns ikonerna att ladda ner i SVG-format.
Feedback
Hjälp oss att förbättra den här komponenten genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.
Publicerad | Jan 18, 2020 |
Senast uppdaterad | Apr 15, 2024 |