Ikoner

Stadens ikoner används som ett komplement till text och för att göra det lättare att navigera i olika gränssnitt, kanaler eller rum. Vi skapar igenkänning och enhetlighet i kommunikationen genom att använda stadens ikoner och följa stadens manér för ikoner.

Göteborgs Stad har en uppsättning med ikoner för kommunikationsmaterial. Använd i första hand de ikonerna. De finns att ladda ner längst ned på sidan och i mediabanken.

Ikoners funktion och utformning

Ikoner är förenklade bilder vars innehåll stämmer överens med verkligheten. Exempel på detta är ikonen skrivare för utskrift eller bestick för att äta. Ibland kan stadens ikoner vara mindre specifika och bestå av symboler för att förklara ett begrepp.

  • Ikoner ska föreställa det den avser (ett begrepp, ett objekt eller en funktion) och vara vägledande eller navigerande.
  • Använd inte ikoner som dekoration.
  • De ska hjälpa till att förenkla ett budskap.
  • Ikoner har en fast funktion eller betydelse över tid.

Göteborgs Stads ikoner görs i första hand i stadens linjemanér, precis som stadens illustrationer som beskriver och förklarar något:

  • Ikonerna har enkla, geometriska former och tydliga linjer med rundat avslut. Undantaget är webbikoner och app-ikoner som behöver fungera i väldigt små storlekar.
  • Ikoner ska vara lätta att läsa av i kontrast och form då de fungerar som ett komplement till text.
  • Ikoner ska främst göras i svart eller vitt. Valet avgörs av bakgrunden.

De olika kategorierna av ikoner som används i staden: ikoner i kommuikationsmaterial, webbikoner, appikoner och piktogram.

De olika kategorierna av ikoner och piktogram som används i staden. Läs mer om de olika kategorierna nedan.

Färgpalett som visar hur svarta  ikoner ska placeras mot stadens ljusa färger och vita ikoner ska placeras mot stadens mörka färger.

Färgpalett som visar hur svarta respektive vita ikoner ska placeras mot stadens färger.

Ikoner i kommunikationsmaterial

I Göteborgs Stad finns en uppsättning ikoner som har samma betydelse eller funktion oavsett vilket kommunikationsmaterial du tar fram. Ikonerna är gjorda utifrån stadens linjemanér för igenkänning i alla kanaler.

Ett urval av ikoner för kommunikationsmaterial.

Exempel på några av ikonerna.

Användning av ikoner

Gör så här!

Exempel på hur vägledande ikoner kan placeras på en hemsida, i anslutning till text.

  • Placera alltid vägledande ikoner tillsammans med en text som förklarar innehållet.
  • Placera vita ikoner mot mörka färger och svarta ikoner mot ljusa färger.

Gör inte så här!

Exempel på hur du inte ska använda ikoner.

  • Placera inte vita ikoner mot ljusa färger eller svarta ikoner mot mörka färger.
  • Ha inte för tunn eller tjock linjetjocklek så att ikonen blir svår att läsa av.
  • Använd inte färg som blir svår att läsa av i ikonen. Lär mer på sidan Färg,

Webbikoner för digitala gränssnitt

Webbikoner ska föreställa det den avser, till exempel skrivare för att skriva ut. Ikonerna frångår linjemanéret för att fungera i liten storlek i digitala gränssnitt.

Ett urval av stadens webbikoner.

Exempel på några av webbikonerna för digitala gränssnitt.

Användning av webbikoner

Exempel på hur webbikoner placeras i digitala gränssnitt.

Exempel på webbikoner placerade i ett digitalt gränssnitt.

App-ikoner

För att app-ikoner ska bli extra tydliga för användaren kan tjockleken på linjer behöva vara grövre än de vägledande ikonerna. Ibland kan även ytor behöva fyllas.

Om du väljer att ha namn eller förkortningar på app-ikonen ska du använda stadens huvudtypsnitt Gotham med vikten Bold eller Black. Tänk på läsbarheten och följ stadens skrivregler. Tänk även på att app-ikoner ska fungera i flera storlekar. App-ikoner görs i stadens komplementfärger, se nedan.

Exempl på hur appikoner kan se ut.

Exempel på olika utformning av app-ikoner.

Färgpalett som visar utformning av app-ikonerna i svart mot stadens ljusa färger och i vitt mot stadens mörka färger.

Färgpalett som visar utformning av app-ikonerna i svart eller vitt mot stadens färger.

Användning av app-ikoner

Exempel på en app-ikon i tre storlekar.

Exempel på en app-ikon som fungerar i tre storlekar med god kontrast.

Läs mer om appar på sidan Digitala gränssnitt i den grafiska manualen.

Piktogram för skyltar och rum

För piktogram, både ute och inne, ska du antingen följa stadens linjemanér eller använda svensk standard för piktogram. Piktogrammen har en fast betydelse och ersätter och stödjer skrift- och talspråket.

Exempel på stadens piktogram.

Kontakta enheten visuell kommunikation för att få tillgång till piktogram i stadens linjemanér för illustration och ikoner. Stadens upphandlade skyltleverantör har även original för piktogrammen. Tillhörande text i versaler ska alltid synas på skylten för att texten ska kunna läsas med fingrar.

Exempel på piktogram enligt svensk standard.

Svensk standard för piktogram anges som standard i instruktionerna för skyltar i Göteborgs Stad.

Läs mer om skyltar och ladda ner piktogram enligt svensk standard på sidan Skyltar. Internationellt förekommande piktogram definieras i en internationell standard.

Andra aktörers ikoner

Till andra aktörers ikoner räknas tjänster som kommer från annan leverantör, men som används inom staden. Det kan vara till exempel en programvara, en extern tjänst eller system. Den här typen av ikoner ska inte ersättas med nya eller egna framtagna ikoner.

Tillgång till ikonerna

Använd i första hand ikonerna som finns att ladda ner här och i mediabanken. Läs mer om mediabanken på Kommunikation i staden.

Kontakta enheten visuell kommunikation för att få tillgång till webbikoner och Göteborgs Stads piktogram. Piktogram enligt svensk standard hittar du på sidan Skyltar.

Ladda ner ikoner för kommunikationsmaterial