Ikoner
Om ikoner i KTH style
Material design och licenser
Ikoner som finns på denna sida är hämtade från det öppna komponentbiblioteket Material Design . De ikoner som används är licensierade enligt Apache 2.0 och fria att använda. Behöver ni en ikon för ett nytt användningsområde kontakta KTH Style-gruppen. Notera att inte alla ikoner i Material Design-biblioteket kan användas fritt.
Filformat
För full responsivitet är filformatet för ikoner på KTH:s webbplats satta i vektorgrafikformatet svg. De tillämpas därmed via textfiler och inte bildfiler.
Storlek på ikoner
Använd ikonerna med den höjd som gäller för filerna på Ikon-sidan i KTH Style . Utgångspunkten för stående och kvadratiska ikoner är en höjd på 20 px men avvikelser förekommer. Vissa pil-ikoner och navigeringselement ("hamburgermeny", "back to top"-länk et c) har som framgår helt andra storlekar. Testa hur ikonerna ser ut i olika sammanhang och responsivt. Vid behov av stöd vid tillämpning kontakta KTH Style-gruppen.
Klickytan för ikoner ska vara 24 px och uppfyller därmed tilllgänglighetskraven på webbriktlinjer.se (Gör länkar, klickbara ytor och menyer användbara för alla) .
Generella riktlinjer för ikoner
Lös först grundproblemet
Använd ikoner sparsamt för det som ska sticka ut.
Undersök först om orsaken till att informationen inte syns beror på felaktig placering, gruppering eller namngivning. Överväg därefter ikoner.
Färger och ikoner
Ikoner ska inte skilja enbart i färg. Se webbriktlinjer.se (Använd inte enbart färg för att förmedla information) .
Ikoner ska ha svart/länkblå eller vit färg beroende på bakgrund. Se Färger .
Ikoner på vit bakgrund
Ikoner på vit bakgrund ska vara länkblå när de är klickbara. Undantag är ikoner i menyer: de har samma färg som navigationslänkarna (svarta).
Ikoner på mörk bakgrund
Ikoner på mörk bakgrund ska vara vita.
Kombinera ikoner med länk
Ikoner kan ibland behöva åtföljas av en länk. Ikon i anslutning till länk ska vara en och samma klickyta. Ikonen behöver inte ha ARIA-label.
Av exempelvis utrymmesskäl kan ibland ikon behövas utan tillhörande länk. Förklarande text behövs då vid hover och som ARIA-label.
När ikon upprepas i en lista eller tabell kan rubriken användas ovanför ikonerna för att förklara vad som händer vid klick.
Gör användningstester (se Testa användbarhet och tillgänglighet ) för att kontrollera om användare förstår ikoner och länktext.
Placering ikon och länk
Eftersträva i första hand placering av ikon framför länk. Placering efter länk kan i undantagsfall vara acceptabel om det fungerar bäst med övrig layout. Placering framför länk gäller alltid i listor.
Undvik länk i brödtext då det försämrar läsbarheten, lägg i stället till text inom parentes. Exempel: (öppnas i ny flik), (pdf).
I de fall ikoner bör kompletteras med text för att underlätta förståelsen anges det i tabellen nedan.
Avstånd mellan ikon och text ska vara 10 px.
Eftersträva placering av ikonen enligt den nedre linjen av textens s k ÅP-höjd. D v s ikonens nederkant ska sluta där nedstapeln slutar i ett gement p. Som i nedanstående exempel:
Ikoner på knapp
Ikoner på knappar används endast för pil, i syfte att tydliggöra framåt- eller tillbakaklick.
Riktlinjer för enskilda ikoner
Vissa ikoner förekommer i olika färger, läs ovan under "Färger och ikoner" om vilka färger du ska välja när.
Ikonerna i olika färger hittar du i Icons (i KTH Style, på engelska).
Alerts, information
| Ikon | Riktlinjer för användning |
|---|---|
|
Används endast i "Error alert". Se Alerts . Ikonen är ej klickbar. Färger som förekommer: Svart. |
|
Används endast i "Success alert". Se Alerts . Ikonen är ej klickbar. Färger som förekommer: Svart. |
|
Används endast i "Information Alert". Se Alerts . Ikonen är ej klickbar. Färger som förekommer: Svart. |
|
Används för att kunna öppna en informationsmodal. Se Modals . Vid klick öppnas modalen. Ikonen placeras efter den information som hänvisar till modalen. Färger som förekommer: Länk-blå med vit text. |
Navigation, search
| Ikon | Riktlinjer för användning |
|---|---|
|
Används för att symbolisera och utföra sökning. Klick genomför sökningen. Färger som förekommer: Länk-blå. |
|
Används i "Next button". Se Buttons för förekommande bakgrundsfärg och beteende vid klick. Färger som förekommer: Svart, Vit. |
|
Används i "Previous button" och "Back link". Se Buttons för förekommande bakgrundsfärg respektive Links för beteende vid klick. Färger som förekommer: Svart, Länk-blå, Vit. |
|
Används för utfällande meny eller för att expandera en del av en sida. Se Navigation och Collapse för beteende vid klick. Färger som förekommer: Svart, Länk-blå, Vit. |
|
Används för utfällande meny eller för att fälla ihop en del av en sida. Se Navigation och Collapse för beteende vid klick. Färger som förekommer: Svart, Länk-blå, Vit. |
|
Används för att flytta objekt vertikalt upp eller ned. Klick flyttar objekt vertikalt upp eller ned. Placeras till vänster och vertikalt centrerat på ett objekt som kan flyttas. Se Forms . Färger som förekommer: Svart, Vit. |
|
Ikon ska tas bort. |
|
Används för att maximera ett fönster. Vid klick maximeras fönstret. Placering: i det översta högra hörnet på ytan som ska maximeras. Färger som förekommer: Länk-blå. |
|
Används för att gå tillbaka från maximerat fönster till normalt läge. Vid klick minimeras fönstret. Placering: i det översta högra hörnet på ytan som ska maximeras. Färger som förekommer: Länk-blå. |
|
Används för att symbolisera en meny på mindre skärm. Ikonen kallas ofta "hamburgermeny". Vid klick öppnas menyn och ikonen byts till ikonen för att stänga (se nedan). Färger som förekommer: Svart. |
|
Används för att symbolisera koppling mellan frågor i formulär. Färger som förekommer: Svart, Länk-blå. |
|
Används för att visa att en länk öppnar sida i ny flik. Vid klick öppnas sidan. Ska bara användas i ett flöde, wizard, för att ge användaren sekundär information. Färger som förekommer: Svart, Länk-blå, Vit. |
|
Används för att symbolisera att något kan stängas. Vid klick stängs fönstret eller menyn direkt eller så visas först en bekräfta-modal. Se Modaler . Färger som förekommer: Svart. |
|
Används längre ned på en sida för att symbolisera möjlighet till förflyttning till toppen av sidan utan scrollning. Klick leder till toppen av sidan. Placeras i nedre högra hörnet på webbsidan (10 px från webbläsarfönstrets höger- och nederkant). Färger som förekommer: Länk-blå. |
Table
| Ikon | Riktlinjer för användning |
|---|---|
|
Används för att visa att en kolumn i en tabell är sorterad från A-Ö. Vid hover visas nedanstående variant och mouse over-texten "Sortera från Ö-A" visas under ikonen. Vid klick sorteras kolumnen från Ö-A och nedanstående ikon visas. Färger som förekommer: Vit. |
|
Används för att visa att en kolumn i en tabell är sorterad från Ö-A. Vid hover visas ovanstående variant och mouse over-texten "...A-Ö" visas under ikonen. Vid klick sorteras kolumnen från A-Ö och ovanstående ikon visas. Färger som förekommer: Vit. |
Pagination
| Ikon | Riktlinjer för användning |
|---|---|
|
Används vid paginering av vyer eller blädderfunktion i galleri. Klick bläddrar till första vyn. Färger som förekommer: Svart. |
|
Används vid paginering av vyer eller blädderfunktion i galleri. Klick bläddrar bakåt till föregående vy. Färger som förekommer: Svart. |
|
Används för att visa på aktiv vy (i exempelvis mediagalleri) där sifferangivelse inte tillämpas. Ikonen är ej klickbar. Färger som förekommer: Svart. |
|
Används för övriga vyer (i exempelvis mediagalleri) där sifferangivelse inte tillämpas. Övergår vid klick till ikon för aktiv vy (se ovan). Färger som förekommer: Svart. |
|
Används vid paginering av vyer eller blädderfunktion i galleri. Klick bläddrar framåt till nästföljande vy. Färger som förekommer: Svart. |
|
Används vid paginering av vyer eller blädderfunktion i galleri. Klick bläddrar till sista vyn. Färger som förekommer: Svart. |
Media
| Ikon | Riktlinjer för användning |
|---|---|
|
Används för media. Klick pausar. Färger som förekommer: Svart. |
|
Används för media. Klick spelar upp. Färger som förekommer: Svart. |
Documents, files
| Ikon | Riktlinjer för användning |
|---|---|
|
Används för att symbolisera mapp eller kollektion av innehåll. Öppnas eller laddas ned vid klick. Färger som förekommer: Länk-blå, Vit. |
|
Används för att symbolisera generellt dokument. Filen öppnas eller laddas ned vid klick. Färger som förekommer: Länk-blå, Vit. |
|
Används för att symbolisera dokument av typen text. Filen öppnas eller laddas ned vid klick. Färger som förekommer: Länk-blå, Vit. |
|
Används för att symbolisera dokument av typen bild. Filen öppnas eller laddas ned vid klick. Färger som förekommer: Länk-blå, Vit. |
|
Används för att symbolisera dokument av typen audio. Filen öppnas eller laddas ned vid klick. Färger som förekommer: Länk-blå, Vit. |
|
Används för att symbolisera dokument av typen video. Filen öppnas eller laddas ned vid klick. Färger som förekommer: Länk-blå, Vit. |
|
Används för att symbolisera dokumentet med kod. Filen öppnas eller laddas ned vid klick. Färger som förekommer: Länk-blå, Vit. |
|
Används för att symbolisera att du kan ladda ned ett dokument. Filen öppnas eller laddas ned vid klick. Färger som förekommer: Länk-blå, Vit. |
|
Används för att symbolisera att du kan ladda upp ett dokument. Filen öppnas eller laddas ned vid klick. Färger som förekommer: Länk-blå, Vit. |
|
Används för att symbolisera dokument av typen word. Filen öppnas eller laddas ned vid klick. Färger som förekommer: Länk-blå, Vit. |
|
Används för att symbolisera dokument av typen excel. Filen öppnas eller laddas ned vid klick. Färger som förekommer: Länk-blå, Vit. |
|
Används för att symbolisera dokument av typen ppt. Filen öppnas eller laddas ned vid klick. Färger som förekommer: Länk-blå, Vit. |
|
Används för att symbolisera dokument av typen pdf. Filen öppnas eller laddas ned vid klick. Färger som förekommer: Länk-blå, Vit. |
|
Används för att symbolisera en komprimerad fil. Filen öppnas eller laddas ned vid klick. Färger som förekommer: Länk-blå, Vit. |
Language
| Ikon | Riktlinjer för användning |
|---|---|
|
Används för att symbolisera svensk eller internationell sajt. Klick på ikon och tillhörande länktext leder till sajt på motsvarande språk. Färger som förekommer: Svart. |
Edit, form
| Ikon | Riktlinjer för användning |
|---|---|
|
Används för att symbolisera möjlighet till redigering. Vid klick öppnas redigera-läge. Färger som förekommer: Länk-blå. |
|
Används för att symbolisera borttagande av objekt. Vid klick raderas objektet. Att föredra är att borttagandet föregås av bekräfta-modal. Se Modaler . Färger som förekommer: Länk-blå. |
|
Används för att symbolisera kopiering av objekt. Vid klick kopieras objektet. Färger som förekommer: Länk-blå. |
|
Används för att symbolisera uträkningsfunktion. Vid klick öppnas uträkningsfunktionen. Färger som förekommer: Länk-blå. |
|
Används för att symbolisera inställningar. Vid klick öppnas inställningar. Färger som förekommer: Länk-blå. |
|
Används för att symbolisera utskriftsfunktion. Vid klick öppnas utskriftsfunktionen. Färger som förekommer: Länk-blå. |
|
Används för vald favorit. Vid klick övergår ikonen i nedanstående variant. Färger som förekommer: Länk-blå. |
|
Används för icke-vald favorit. Vid klick övergår ikonen i ovanstående variant. Färger som förekommer: Länk-blå. |
|
Används för att symbolisera val av datumdatum. Vid klick öppnas kalendern. Färger som förekommer: Svart, Länk-blå, Vit. |
|
Används för att symbolisera ett ord (asterisk). Ikonen är ej klickbar. Färger som förekommer: Svart. |
|
Används för att symbolisera att objektet inte är dolt. Vid klick döljs objektet och ikonen byts till nedanstående variant. Färger som förekommer: Svart, Länk-blå. |
|
Används för att symbolisera att objektet är dolt. Vid klick visas objektet och ikonen byts till ovanstående variant. Färger som förekommer: Svart, Länk-blå. |
Social, users
| Ikon | Riktlinjer för användning |
|---|---|
|
Används för att symbolisera "gilla". Vid klick markeras ikonen och angivet antal brevid ikonen ökar med ett. Färger som förekommer: Länk-blå. |
|
Används för att symbolisera "ogilla". Vid klick markeras ikonen och angivet antal brevid ikonen ökar med ett. Färger som förekommer: Länk-blå. |
|
Används för att symbolisera ett citat. Ikonen är ej klickbar. Färger som förekommer: Svart, Vit. |
|
Används för att symbolisera notifikationer. Intilliggande siffran anger antal olästa notifikationer. Vid klick öppnas notifikationer. Färger som förekommer: Vit. |
|
Används för att symbolisera en meddelandefunktion. Vid klick öppnas meddelandefunktionen. Färger som förekommer: Vit. |
|
Används för att symbolisera e-post. Vid klick öppnas e-postprogrammet. Färger som förekommer: Vit. |
|
Används för att symbolisera funktion för att hantera användare. Vid klick öppnas funktionen. Färger som förekommer: Länk-blå. |
Others
| Ikon | Riktlinjer för användning |
|---|---|
|
Används för att symbolisera jämförelse. Vid klick öppnas jämförelseläge. Färger som förekommer: Länk-blå. |
|
Används för att symbolisera lyckat utförande. Ikonen är ej klickbar. Färger som förekommer: Svart. |
|
Används för att symbolisera filtrering. Vid klick aktiveras valda inställningar. Färger som förekommer: Länk-blå. |