Hoppa till huvudinnehåll

Ikoner

Ikoner används som ett komplement till text för att underlätta för användaren, inte för enbart dekoration. Rätt använda kan ikoner göra funktioner och innehåll tydligare och hjälpa användare att snabbt hitta rätt i grännssnittet.

Midas använder Lucide Icons som ikonbibliotek. Vi använder ikonerna direkt från Lucide, utan några modifieringar.

Riktlinjer​

  • För att undvika tvetydighet, använd en och samma symbol per funktion. Vi har en uppsättning standardikoner på Migrationsverket som ska användas på samma sätt i alla system och tjänster.
  • Färgen på ikoner sätts via våra ikonfärger. Inga egna färger utanför tokens ska användas.
  • Standardstorleken på ikonerna är 20px (1.25rem). Om textstorleken är liten eller ikonen används i en tabell kan 16px (1rem) användas istället.
  • Ikonen ligger som standard till vänster om den tillhörande texten.
  • Dölj ikonen för skärmläsare om den bara kompletterar en befintlig text. Om ikonen är interaktiv eller bär på egen information måste den i stället ha en egen textbeskrivning.

I externa tjänster​

I externa tjänster bör ikoner användas restriktivt. Det beror på att igenkänningseffekten inte är lika stor för sällananvändare i externa tjänster som den är i interna system där användaren ser dem dagligen. När ikoner används bör de alltid kombineras med text för ökad tydlighet.

I interna system​

För interna system där användarna är bekanta med gränssnittet och återkommer till det ofta kan ikoner användas utan text för att effektivisera och spara plats. Men rekommendationerna är att kombinera ikonen med text och att vara försiktig med ikoner som inte är allmänt vedertagna. Testa med användare om du är osäker.

Färger på ikoner​

När ikoner används tillsammans med text bör de ha samma färg som den kompletterande texten. När en ikon används för att kommunicera status används tokens success, info, important och warning, se ikonfärger. Tänk på att inte enbart använda färg för att komunicera status och att färgen måste ha tillräcklig kontrast mot bakgrunden (4,5:1).

Standardikoner​

För att säkerställga enhetlighet och tydlighet har vi ett antal standardikoner som ska användas på samma sätt i alla tjänster och system.

IkonNamnAnvändning
MenuHuvudmeny, meny
EllipsisVerticalMeny
EllipsisMeny

Pilar/riktning​

IkonNamnAnvändning
ArrowRightHöger, nästa
ArrowLeftVänster, tillbaka
ChevronDownFäll ut, nedåt
ChevronUpFäll ihop, uppåt

Status​

IkonNamnAnvändning
CheckOk, slutfört
InfoInformation
FlagViktig information
TriangleAlertVarning, fel

Action​

IkonNamnAnvändning
PlusLägg till, öka
MinusTa bort, minska
Trash2Ta bort, släng
PencilRedigera
XStäng, avbryt
SearchSök

Länkar/Media​

IkonNamnAnvändning
ArrowDownToLineLadda ner
SquareArrowOutUpRightExtern länk

Övrigt​

IkonNamnAnvändning
LogInLogga in
LogOutLogga ut
CalendarDaysKalender, datum, bokning
BellNotifiering
HouseHem
LanguagesSpråkväxlare
MoonMörkt läge
SunLjust läge