Grafik

Ikoner

Ikoner kan på ett snabbt och tydligt sätt hjälpa en mottagare att navigera. Ikoner är ett universellt språk. Våra ikoner används som en komponent inom ramen för den visuella identiteten.

Inom Uppsala kommun använder vi i huvudsak redan befintliga, lättillgängliga ikoner. De kan hämtas från ett flertal sajter, programmiljöer och öppna bibliotek.

Vi har ett antal standardikoner för kontaktinformation som till exempel telefon, e-post, öppettider, chatt och support. Det finns även ikoner för WC. Ikonerna finns tillgängliga i vårt Adobe bibliotek och de går även att ladda ner här.

Exempel på standardikoner

Ikonernas form

Urvalet ställer krav på dig som använder ikoner

För att göra ett relevant urval behöver du som använder ikoner fundera över hur, och i vilket sammanhang, ikonen ska användas. Du behöver utveckla en känsla och förståelse för vilken typ av ikon som kan användas.

Tänk på att vi inom Uppsala kommun arbetar medvetet med att undvika stereotyper och att vi har ett normkritiskt/normbrytande perspektiv även när vi väljer ikoner.

Ta gärna del av exemplen nedan för att få en förståelse för hur de kan se ut. Har du frågor eller funderingar på vilken typ av ikon som kan användas – vänd dig till kommunikationsstaben på Uppsala kommun så kan vi ge dig guidning och stöd.

Rätt

Så här ser våra ikoner ut:

  • 2-dimensionella
  • neutralt perspektiv
  • fyllda former
  • stiliserade former

ikoner_exempelratt.svg

Fel

Så här ser inte våra ikoner ut:

  • 3-dimensionella
  • grod- fågelperspektiv
  • outline, linje- eller handteckning
  • linje- eller prickmönster

ikoner_exempel_fel.svg

Val av färg på ikoner

Vi får använda alla färger i den visuella identitetens färgpalett till ikoner. Samma regelverk gäller för ikoner som för rubriktext. Den gula signalfärgen ska användas sparsamt för enstaka ikoner eller symboler för att förstärka dem.

Hålrummen får aldrig vara fyllda med någon färg. Det betyder att hålrummen alltid ska ha samma färg som bakgrundsplattan. Det är heller inte tillåtet att ha fler färger än en på ikonerna.

Ikon mot mörk bakgrund

Mot en basfärg som bakgrund eller en infärgad bild kan vi använda ikoner i följande färger. Följ alltid samma färgtema som basfärgen. Läs mer om våra fyra färgteman på sidan om färger.

Ikon i komplementfärg 1
Ikon i komplementfärg 1
Ikon i ton av basfärg
Ikon i ton av basfärg
Ikon i signalfärg
Ikon i signalfärg

Ikon mot ljus bakgrund

Mot vit bakgrund eller en ljustonad bild kan vi använda ikoner i följande färger. Följ alltid samma färgtema som den aktuella basfärgen. Läs mer om våra fyra färgteman på sidan om färger.

Ikon i basfärg
Ikon i basfärg
Ikon i ton av basfärg
Ikon i ton av basfärg
Ikon i komplementfärg 2
Ikon i komplementfärg 2

  

Linjatur

Vår linjatur används som en komponent inom ramen för den visuella identiteten den består av en rak linje och en rundad linje. Den raka linjen kan göras längre och kombineras tillsammans med den rundade linjen på olika sätt.

Rak linje
Rak linje
Rundad linje
Rundad linje

Vi får använda alla våra basfärger och komplementfärger i den till vår linjatur vilket innebär att komplementfärg 1 används mot basfärg och komplementfärg 2 mot ljus bakgrund. Men den gula signalfärgen används inte till linjaturen.

Ta gärna del av exemplen nedan. Har du frågor eller funderingar hur linjaturen kan användas är du välkommen att vända dig till kommunikationsstaben på Uppsala kommun så kan vi ge dig guidning och stöd.

Exempel på hur vi använder vår linjatur

I dessa exempel kan du även se hur vi kombinerar basfärger, komplementfärger och toner av basfärger. Läs mer om våra olika färgteman under sidan om färger.

Exempel 1 rätt

ikon_ratt.svg
Rätt. Linjatur i komplementfärg 1 tillsammans med sin basfärg. Vi använder endast komplementfärger tillsammans med basfärgen i samma färgtema.

Exempel 1 fel

ikon_fel.svg
Fel. Vi använder endast komplementfärger tillsammans med basfärgen i samma färgtema. Den lila komplementfärgen är inte i samma färgtema som den gröna basfärgen.  

  

Exempel 2 rätt

ikon_ratt.svg
Rätt. Linjaturer i toner av basfärg tillsammans med basfärgen i samma färgtema. 

 

Exempel 2 fel

ikon_fel.svg
Fel. Vi använder endast toner av basfärg tillsammans med basfärgen i samma färgtema. De lila tonerna är inte i samman färgtema som den gröna basfärgen i bakgrunden.

  

ikon_ratt.svg
Rätt. Linjatur i komplementfärg 2 mot vit bakgrund. Ikoner i basfärg och den gula signalfärgen. 

ikon_fel.svg
Fel. Linjatur i komplementfärg 1 ska inte användas mot vit bakgrund. Vi använder endast komplementfärg 1 tillsammans med basfärgen i samma färgtema i bakgrunden.

  

ikon_ratt.svg
Rätt. Linjatur i toner av basfärg mot vitt. Ikoner i basfärg och den gula signalfärgen. Vi använder toner av basfärg tillsammans med sin basfärg.

ikon_fel.svg
Fel. Här används endast toner av basfärg i både linjatur och ikoner. Den mörka basfärgen måste också finnas med någonstans i grafiken.

  

Exempel 5 och 6 rätt

ikon_ratt.svg
Rätt. Här är bilden sekundär i kommunikationen. Linjaturen ska placeras på en yta som dämpar bildens betydelse.

 

Exempel 5 fel

ikon_fel.svg
Fel. Här är bilden är primär i kommunikationen. Det vill säga bilden har ett uppenbart mervärde och förstärker tydligt budskapet. Linjaturen får då inte placeras så den konkurrerar med bilden.

  

Exempel 5 och 6 rätt

ikon_ratt.svg
Rätt. Linjaturen i komplementfärg 1 är i samma färgtema som basfärgen i den infärgade bilden i bakgrunden.

 

Exempel 6 fel

ikon_fel.svg
Fel. Linjaturen i komplementfärg 1 är inte i samma färgtema som basfärgen. Vi använder endast komplementfärger tillsammans med basfärgen i samma färgtema.

  

ikon_ratt.svg
Rätt. Linjatur i basfärg mot vitt.

 

ikon_fel.svg
Fel. Vi använder endast en komplementfärg eller basfärg i en linje i vår linjatur.

  

Exempel 8 rätt

ikon_ratt.svg
Rätt. Linjer i vår linjatur ska ha samma storlek.

 

Exempel 8 fel

ikon_fel.svg
Fel. Vi använder inte olika storlekar på linjer i vår linjatur.

  

ikon_ratt.svg
Rätt. Den rundade linjen i vår linjatur får inte förändras.

 

Exempel 9 fel

ikon_fel.svg
Fel. Vi använder till exempel inte raka hörn på linjer i vår linjatur.

  

Exempel 10 fel

ikon_ratt.svg
Rätt. Linjer i vår linjatur får inte innehålla text, ikoner eller andra komponenter, de placerar vi utanför linjen.

 

Exempel 10 fel

ikon_fel.svg
Fel. Vi placerar inte text, ikoner eller andra komponenter i vår linjatur.