Icons

Ikoner är visuella, grafiska symboler som används för att för att enskilt eller tillsammans med text förmedla ett budskap.

Vi undviker att låta ikoner vara enda sätt att till sig information utan ser det snarare som ett grafiskt komplement.

Observera att ikoner med de nya Inera-färgerna gäller från och med 14 december 2022.

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.

Ikonernas olika färger kan väljas i högermenyn i Figma.

Storlekar

I Figma finns ikoner i två olika storlekar: 40x40 px samt 20x20 px
I kod (IDS) finns stöd för tre olika storlekar: XS (10x10), S (20x20) samt M (40x40)

Grid och specifikationer

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
Färger enligt varumärke, enda ikon som har fast färg är “shield locked filled” som är röd.

Specifikt för 1177

Använd två nyanser av samma färg på ikonen (bas och mörk)
Detaljer inne ikonen har den ljusare nyansen
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 inlogging är placerad på sidan i innehållet. Grå används t.ex om inloggningsfunktionen är disablad eller om det handlar om information om inloggning och inte är klickbart.

Se även Varumärkesmanualen för 1177 - grafiska element.

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).

Stäm av med UX-ramverket om dessa ska användas.

Google Material design ikonbibliotek

För 1177

Länkade ikoner = Blå, himmel (sky-base) #396291
 Ej länkade ikoner = Grå, stone (stone-base) #636466

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

WCAG-kriteriet 1.1.1

Allt innehåll som inte är text, som presenteras för användaren har ett textalternativ (alt=”ett textalternativ”) med samma syfte. Är det enbart en dekorativ bild som inte ger någon form av information så kan en tom alt-text sättas istället. Detta gäller dock inte dekorativa bilder bland annat, se WCAG 1.1.1 för mer information.

WCAG-kriteriet 3.2.4

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.

WCAG-kriteriet 1.4.11

Använd tillräckliga kontraster i komponenter och grafiska element: Minst 3.0 i kontrastvärde.

WCAG-kriteriet 1.4.3

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).

WCAG-kriteriet 2.1.1

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)

WCAG-kriteriet 2.4.7

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 för respektive bibliotek att ladda ner i SVG.