Logotyp vetenskapsrådet
logo_mobile

Text

Ikoner på webbplatserna

För att skapa en enhetlig och tydlig design på Vetenskapsrådets webbplatser används Material symbols för alla ikoner.

På våra webbplatser använder vi så långt det går svg-ikoner hämtade från Googles fria ikonbibliotek google symbols.

I vissa fall, exempelvis ikonen för menyn i övre högra hörnet, så används css för att skapa ikonen. Detta för att göra animeringen av ikonen möjlig.

De SVG-ikoner som hämtas från Material Symbols ska alltid ligga på webbservern och inte länkas in, eftersom det senare skapar beroenden till externa tjänster. Tjänster kan eventuellt förändras eller stängas under webbplatsens livslängd.

Anpassning av ikoner

Det finns två storlekar på ikoner, "small" och "large"

Small

Optical size: 24px

Weight: 200

Large

Optical size: 40px

Weight: 200

Ikoner vi använder

De ikoner som visas nedan är de vi idag använder på våra webbar.

Pil
vrd-icon-arrow

Sortering lista
vrd-icon-sort-list

Sortering galleri
vrd-sort-gallery

Kryss
vrd-icon-cross

Minus
vrd-icon-minus

Plus
vrd-icon-plus

Länkpil
vrd-icon-dart

Förstoringsglas
vrd-icon-magnifying-glass

Tre punkter
vrd-icon-three-points

Dokument
vrd-icon-document

Brev
vrd-icon-mail

Skrivare
vrd-icon-printer

Telefon
vrd-icon-phone

Trådglob
vrd-icon-wire-globe

Meny
vrd-icon-meny-bar

Ikoner small



<span class="vrd-icons-size-smal vrd-icon-dart vrd-icons-align-right vrd-link-this-frame" >
        <a  class="normal" href="#">Läs mer om forskningsstöd</a>
</span>
<br>
<span class="vrd-icons-size-smal vrd-icon-printer vrd-icons-align-right vrd-link-this-frame" >
      	<a  class="normal" href="#">Skriv ut</a>
</span>

Ikoner large



<span class="vrd-icons-size-large vrd-icon-dart vrd-icons-align-right vrd-link-this-frame">
	<a class="normal" href="#">Läs mer om forskningsstöd</a>
</span>
<br>
<span class="vrd-icons-size-large vrd-icon-printer vrd-icons-align-right vrd-link-this-frame">
	<a class="normal" href="#">Skriv ut</a>
</span>

Implementera Ikoner

För att implementera ikonerna behöver du ladda ner ikonpaketet, CSS-fil och sedan använda CSS-klasserna din HTML-kod. Antingen som ett komplement eller fristånde.

Ladda sedan upp ikonerna på webbplatsen och uppdatera CSS-filen med rätt säkväg till respektive ikon. Efter det ska du kunna använda ikonerna på webbplatsen.


<a link rel="stylesheet" href="vrd-official-icon-collection.css">

Nedladdningsfiler

Översik över CSS-klasser
NamnBeskrivningExempel på användning
vrd-iconsGrundklass för för ikonerAnvänds tillsammans med en specifik ikonklass
vrd-icons-displaySkapar bredd och höjd så att ikonen får plats Om ikonen ska ligga fritt
vrd-icons-display-boxSkapar en box för ikonenOm ikonen ska ligga inom en begränsad yta
vrd-icons-size-smalLiten centrerad ikonAnvänds tillsammans med en specifik ikonklass
vrd-icons-size-largeStor centrerad ikonAnvänds tillsammans med en specifik ikonklass
vrd-icons-align-leftFår ikonen att linjera åt vänsterNär ikonen ska ligga till vänster om en text
vrd-icons-align-rightFår ikonen att linjera åt högerNär ikonen ska ligga till höger om en text

Riktlinjer för ikoner

  • Ikoner ska användas sparsamt och deras uppgift är att hjälpa och vägleda användaren.
  • Ikoner används som komplement till tillhörande text.
  • Ikoner ska ha samma färg som texten som kompletterar ikonen.
  • Ikoner i länkar ska inte vara understrukna och ligga till höger om texten.
  • Använd den ikonstorlek som passar tillhörande text, exempelvis använd alltid ikoner small till brödtext.

Animering av ikoner

För att skapa en mjukare upplevelse för användare använder vi animationer på element, länkar och övergångar. Det innebär att vi gör en enkel toning när pekaren är över länkar och animerar ikoner som passar att animeras.

Ikoner

Animation 0,5 sekunder mellan nyckelbilder