Iconen

Voor het toevoegen van de Rijksoverheid-iconen binnen de website kan gebruikt gemaakt worden van een icoon-lettertype via de classes icon en icon-{"{naam}"}.

Standaard maken deze classes gebruik van het meegeleverde icoon-lettertype ro-icons-light. Dit lettertype bevat de iconen uit de Manon basis-set. Zie beschikbare iconen voor meer informatie over deze standaard iconen.

Daarnaast is het op twee manieren mogelijk om de iconen-set uit te breiden. Ten eerste kan je ervoor kiezen de uitgebreide icoon-set van dit thema te gebruiken. Ten tweede is het mogelijk om applicatie-specifieke iconen toe te voegen. Zie hiervoor de Manon-documentatie: andere iconen toevoegen

Iconen gebruiken

Voeg de class icon om gebruik te maken van de standaard icon-styling, en de class van het benodigde icoon, bijvoorbeeld: icon-home.

Knop met icoon en tekst

Visueel voorbeeld:

HTML-voorbeeld:

            
<button>
  <span class="icon icon-home" aria-hidden="true"></span>Hoofdpagina
</button>

Link als knop met tekst

Visueel voorbeeld:

Zoeken

HTML-voorbeeld:

            
<a href="#" class="button">
  <span class="icon icon-search" aria-hidden="true"></span>Zoeken
</a>

Icoonknop

Voor meer informatie en aandachtspunten zie Icoonknoppen.

Visueel voorbeeld:

HTML-voorbeeld:

            
<button class="icon-only">
  <span class="icon icon-home" aria-hidden="true"></span>Hoofdpagina
</button>

Beschikbare iconen

Het thema wordt geleverd met het icoon-lettertype ro-icons-light. Deze bevat de iconen uit de Manon standaard-set. Deze iconen zijn dus ook beschikbaar in de open-source Manon thema's.

home
search
hamburger
close
questionmark
sort
ascending
descending
chevron-up
chevron-down
chevron-left
chevron-right
chevron-light-up
chevron-light-down
chevron-light-left
chevron-light-right
check
download
heart
lock-closed
on-off
outgoing
reset
smartphone
to-top
trash
user

Uitgebreide icoon-set

Als de applicatie een icoon nodig heeft, dat niet in de standaard-set zit, dan is het mogelijk om de uitgebreide icoon-set te gebruiken. Deze bevat een grotere sub-set van de rijkshuisstijl-iconen.

Importeer hiervoor na het thema ook de uitgebreide icoon-set:

/* scss/main.scss */
@use "manon";
@use "@minvws/nl-rdo-rijksoverheid-ui-theme";
@use "@minvws/nl-rdo-rijksoverheid-ui-theme/components";
// voeg deze regel toe:
@use "@minvws/nl-rdo-rijksoverheid-ui-theme/icons-extended";

- ascending
- descending
- sort
- check
- pinterest
- twitter-inverse
- twitter
- flickr
- youtube
- instagram
- facebook
- chevron-light-right
- chevron-light-left
- chevron-light-up
- chevron-light-down
- chevron-left
- hamburger
- chevron-right
- questionmark
- speech
- arrow-down
- arrow-up
- arrow-right
- arrow-left
- map
- outgoing
- pause
- trash
- user
- chevron-up
- chevron-down
- plus
- calendar
- download
- heart
- letter
- reset
- play
- search
- clock
- close
- line
- lock-closed
- on-off
- to-top
- grid
- list
- csv-file
- html-file
- pdf-file
- document
- bar-graph
- tree-graph
- grid-view
- list-view
- voor-elkaar-zorgen
- hart-met-oudere
- hart-tussen-2-uitgestoken-handen
- hoofd-silhouet-hoesten
- hoofd-silhouet-met-wattenstaafje-bij-mond
- jeugdzorg
- gezinszorg-met-oudere
- gezinszorg
- man-met-hart
- man-met-pleister1
- man-met-pot-met-deksel
- medisch-beroepsgeheim
- verzorgingstehuis
- langdurige-zorg
- persoon-in-rolstoel-en-munten
- persoon-met-rugpijn
- persoon-staand-met-hart
- rollator-bij-trap
- kinderbescherming
- verboden-te-roken
- vrouw-en-persoon-in-rolstoel
- arrow-left
- mantelzorg
- ouderenzorg
- welzijnswerk-ouderen
- noodopvang
- opvang-en-nazorg
- hoofd-silhouet-met-wattenstaafje-bij-neus
- rokende-filtersigaret
- koorts
- benauwdheid
- geen-spatscherm
- schone-handen
- mondkapje
- psychologische-hulp
- vrouw-met-pot-met-deksel
- coronavaccinsvg
- ehbo-aed
- ehbo-ruimte
- kolfruimte
- esculaap
- chip
- computer
- oude-computer
- dataverkeer
- digitaal-onderzoek
- digitale-uitwisseling
- nieuwe-computer
- gamecontroller
- grafieken-op-beeldscherm
- beeldscherm-met-hartpng
- hybride-laptop
- informatie-op-internet
- internet
- ga-naar-www
- internet-archief
- laptop
- laptop-met-huis
- cybersecurity
- printer
- server
- smartphone
- smartphone-bedienen-met-vinger
- usb-lader
- tablet
- televisie
- website
- webwinkel
- ict
- computercode
- digitalisering
- ux-design
- database
- application
- basisregistratie
- gegevensuitwisseling
- smartphone-met-streep-erdoor
- beeldscherm-met-streep-erdoor
- inloggen
- online-leren
- online-groepstraining
- wifi
- beeldbellen
- zendmast
- 2-hoge-gebouwen-met-pijl-naar-rechts
- huurwoning
- bakkerijketens
- koopwoning
- cateringbedrijven
- circulaire-bouw
- dorp
- gemeente---en-provinciefonds
- leefbaarheid
- evenemententent
- festival-ehbo
- schone-industrie
- fabriek-aan-water
- fabriek-met-stapel-munten
- uw-cak
- gebouw-cjib
- gebouw-cvz
- gebouw-igz
- villa
- ambassade---consulaat
- school
- sector-speciaal-onderwijs
- rechtbank
- home
- overstroming-dreiging-1
- overstroming-dreiging-2
- overstroming-dreiging-3
- leegstand
- kleinschalig-wonen
- instortingsgevaar
- woninginbraak
- huis-visueel-gehandicapten
- huis-auditief-gehandicapten
- lokaal-welzijnswerk
- huis-psychiatrische-patienten
- verpleeghuis
- huis-verstandelijk-gehandicapten
- huis-lichamelijk-gehandicapten
- woning-gelijkvloers-wel-rollator
- rolstoel-toegankelijke-woning
- huurtoeslag
- adl-woning
- huisvesting
- woning-met-verdieping
- woning-met-traplift
- coffeeshop
- coffeeshop-in-wijk
- huiselijk-geweld
- beschermde-woonomgeving
- laag-huis
- grootstedelijk
- excellente-scholen
- gebouw-nvwa
- gebouw-vws
- gebouw-zini
- uitvoering
- hoog-huis
- basis-kantoorgebouw
- schade
- flat
- leegstand-en-tijdelijk-gebruik
- ziekenhuis
- gebouwenbeheer
- hoogbouw-met-pijl-naar-2-hoge-gebouwen
- man-torso-voor-hoogbouw
- gebouw-ggz
- zorgkantoor
- grote-brand
- actieve-gevel
- kantoor-vol-energie
- ondernemingen
- horecaketens
- toren
- moskee
- ontwerp
- rijtjeshuis
- industrie
- industrie-met-druppel-water
- schuur-met-silo-erachter
- stacaravan
- supermarktketens
- megastallen
- dreiging-van-buitenaf
- drie-personen-in-huis
- gebouw-met-busje
- gemeentehuissvg