Styleguide

Ikoner

Ikoner är ett komplement till text och ska göra det enklare för användarna att förstå vad de ska göra. Du förenklar för användaren och ger en enhetlig bild av Jordbruksverkets digitala tjänster genom att använda rätt ikon i rätt färg och storlek samt placera den på rätt ställe.

Hur du använder ikoner

Komplettera ikonen med en text som beskriver samma sak som ikonen. Ikoner i sekundära gränssnitt, t.ex för inställningar och personalisering behöver inte ha en beskrivande text. De ikonerna ska istället ha en tooltip som visas när användaren hovrar, trycker eller håller över ikonen.
Ikonen ska ha samma storlek som texten.
Ikoner ska ha samma färg som texten som kompletterar ikonen.
Ikoner i länkar ska inte vara understrukna.
Ikonen ska vara placerad till vänster om texten. Undantaget är när du vill spara utrymme och komprimera knappar, till exempel i en mobil. Då kan ikonen vara större än texten och placeras över den. Det är särskilt användbart på mobil där man vill förstora och ändra den klickbara ytan till en mer kvadratisk form.

Vi har valt Font Awesome

Vi på Jordbruksverket designar inte ikoner, utan låter de som kan det bäst göra jobbet. Vi använder en av de populäraste ikonuppsättningarna, Font Awesome.

Font Awesome erbjuder över 5 000 ikoner. Vi har valt ut de vanligaste ikonerna och det är dessa du ska använda. Kontakta styleguideteamet om du behöver en annan ikon.

Så här laddar du ner ikonerna

För att använda en ikon:

Lägg till sjv-ikoner.css Länk till annan webbplats. i ditt projekt
I HTML använd classnamnet i ett <span> elementet. Ska inte användas i ett <i> element eftersom dessa element ska endast användas för kursiv text, så att skärmläsare inte tror att en ikon är kursiv text.
I CSS använd "content" property

Tillgängliga ikoner

Font Awesome har information om hur du kan göra dekorativa respektive semantiska ikoner tillgängliga.

Font Awesomes information om tillgängliga ikoner Länk till annan webbplats.

Ikoner i Angular projekt

För att lägga in alla ikoner lägg in följande i din angular.json fil under "styles". Detta kommer göra att ikonerna lägger sig i en egen bundle fil.

"styles": [
{
  "input": "./node_modules/@sjv/component-library/dist/release/sjv-ikoner.css",
  "bundleName": "sjv-ikoner"
},
...

Importera enskilda ikoner

Mönstret är detsamma om man vill lägga in enskilda ikoner, skillnaden är att de behöver ligga i sina egna bundles, eftersom Angular är "smart" och plockar bort fonts med samma namn. Vilket betyder att varje ikon behöver ligga i sin egen bundle då alla ikoner har samma font namn "sjv-icon-fonts". Lägger men in flera enskilda ikoner så kommer de då får varsinn egen CSS fil, har man lagt in fler än 10 enskilda ikoner kommer de ta mer bandbredd än att importera in alla ikoner. Vill man använda fler än 10 ikoner är det bättre att imprortera in alla iknoner.

OBS. Ikoner med ett streck i namnet har istället ett understreck när den ska importeras (undantaget prefixet "sjv-i-"), detta på grund av en begränsning i webpack som designsystem använder för att bygga upp ikon CSS biblioteket.

"styles": [
  {
    "input": "./node_modules/@sjv/component-library/dist/release/ikoner/sjv-i-kryss.css",
    "bundleName": "sjv-i-kryss"
  },
  {
    "input": "./node_modules/@sjv/component-library/dist/release/ikoner/sjv-i-multiselect_ikon.css",
    "bundleName": "sjv-i-multiselect_ikon"
  },
  ...

Exempel på att lägga till en ikon i HTML

Du kan se i HTML-koden hur du lägger till en ikon i HTML.

HTML

<span class="sjv-i-check" style="font-size: 2rem; margin: 2rem 2rem 0 0;"></span>

Exempel på att lägga till en ikon från CSS

Du kan se i HTML-koden hur du lägger till en ikon från CSS.

HTML

<style>
 .randomIkon::before {
   content: "\e900";
  }
</style>
<span class="sjv-icon randomIkon" style="font-size: 2rem"></span>

Våra utvalda ikoner

Bokmärke

Class : sjv-i-bokmarke

Content : "\e903"

Kalender

Class : sjv-i-kalender

Content : "\e914"

Check

Class : sjv-i-check

Content : "\e904"

Extern länk

Class : sjv-i-extern-lank

Content : "\f08e"

Pil upp

Class : sjv-i-pil-upp

Content : "\ea3a"

Pil höger

Class : sjv-i-pil-hoger

Content : "\ea3c"

Pil vänster

Class : sjv-i-pil-vanster

Content : "\ea40"

Chevron ner

Class : sjv-i-chevron-ner

Content : "\e906"

Chevron upp

Class : sjv-i-chevron-upp

Content : "\e907"

Chevron höger

Class : sjv-i-chevron-hoger

Content : "\e905"

Chevron vänster

Class : sjv-i-chevron-vanster

Content : "\e908"

Ångra

Class : sjv-i-angra

Content : "\e900"

Kommentar

Class : sjv-i-kommentar

Content : "\e916"

Kopiera

Class : sjv-i-kopiera

Content : "\e917"

Sök

Class : sjv-i-sok

Content : "\e925"

Redigera

Class : sjv-i-redigera

Content : "\e921"

E-post

Class : sjv-i-e-post

Content : "\e909"

Kryss

Class : sjv-i-kryss

Content : "\e90b"

Utropstecken

Class : sjv-i-utropstecken

Content : "\e929"

Flagga

Class : sjv-i-flagga

Content : "\e90e"

Skräp

Class : sjv-i-skrap

Content : "\e930"

Mapp

Class : sjv-i-mapp

Content : "\e91b"

Öppen mapp

Class : sjv-i-oppen-mapp

Content : "\e91d"

Hamburgermeny

Class : sjv-i-hamburgermeny

Content : "\e910"

Hem

Class : sjv-i-hem

Content : "\e911"

Telefon

Class : sjv-i-telefon

Content : "\e93b"

Spara

Class : sjv-i-spara

Content : "\e93c"

Minus

Class : sjv-i-minus

Content : "\e91c"

Plus

Class : sjv-i-plus

Content : "\e91f"

Skriv ut

Class : sjv-i-skriv-ut

Content : "\e924"

Fråga

Class : sjv-i-fraga

Content : "\e90f"

Fråga cirkel

Class : sjv-i-fraga-cirkel

Content : "\f059"

Inställningar

Class : sjv-i-installningar

Content : "\e913"

Logga in

Class : sjv-i-logga-in

Content : "\e919"

Logga ut

Class : sjv-i-logga-ut

Content : "\e91a"

Användare

Class : sjv-i-anvandare

Content : "\e901"

Användare cirkel

Class : sjv-i-anvandare-cirkel

Content : "\e93d"

Uppdatera

Class : sjv-i-uppdatera

Content : "\e928"

Fel

Class : sjv-i-fel

Content : "\e930"

Varning

Class : sjv-i-varning

Content : "\e92d"

Framgång

Class : sjv-i-framgang

Content : "\e92e"

Språk

Class : sjv-i-sprak

Content : "\e933"

Lager

Class : sjv-i-lager

Content : "\e935"

Caret sortera

Class : sjv-i-caret-sortera

Content : "\e938"

Class : sjv-i-i

Content : "\f129"

Info

Class : sjv-i-info

Content : "\e931"

Ladda upp

Class : sjv-i-ladda-upp-fil

Content : "\e912"

Ladda ner

Class : sjv-i-ladda-ner-fil

Content : "\e939"

Support

Class : sjv-i-support

Content : "\e93a"

Tag

Class : sjv-i-tag

Content : "\e926"

Prickmeny

Class : sjv-i-prickmeny

Content : "\f142"

Låst

Class : sjv-i-last

Content : "\f023"

Olåst

Class : sjv-i-olast

Content : "\e927"

RSS

Class : sjv-i-rss

Content : "\e922"

Flera svar

Class : sjv-i-multiselect-ikon

Content : "\e932"

Caret ner

Class : sjv-i-caret-ner

Content : "\e934"

Caret upp

Class : sjv-i-caret-upp

Content : "\e93e"

Caret vänster

Class : sjv-i-caret-vanster

Content : "\e936"

Caret höger

Class : sjv-i-caret-hoger

Content : "\e937"

Kamera

Class : sjv-i-kamera

Content : "\e93f"

Anteckning

Class : sjv-i-anteckning

Content : "\e940"

Filter

Class : sjv-i-filter

Content : "\f0b0"

Tabell kolumner

Class : sjv-i-tabell-kolumner

Content : "\e942"

Ikoner för nedladdning av filer

Använd dessa ikoner när du vill att användaren ska ladda ner en fil. Placera ikonen till vänster om texten som förklarar vad som ska laddas ner.

I löpande text ska du inte använda ikoner.

Wordfil

Class : sjv-i-wordfil

Content : "\e92b"

Fil

Class : sjv-i-fil

Content : "\e90c"

Filarkiv

Class : sjv-i-filarkiv

Content : "\e90d"

Ljudfil

Class : sjv-i-ljudfil

Content : "\e918"

Kodfil

Class : sjv-i-kodfil

Content : "\e915"

Excelfil

Class : sjv-i-excelfil

Content : "\e90a"

Bildfil

Class : sjv-i-bildfil

Content : "\e902"

Powerpoint-fil

Class : sjv-i-powerpoint-fil

Content : "\e920"

PDF-fil

Class : sjv-i-pdf-fil

Content : "\e91e"

Videofil

Class : sjv-i-videofil

Content : "\e92a"

Filexport

Class : sjv-i-filexport

Content : "\e943"

Senast publicerad 2024-03-01

Sidansvarig för sidan är Styleguide