Icons are used for decorative purposes only.
Icons cannot be used as the only means to convey the information.
The set of icons is collected in the Ghent icon font. For more information about the use of the Ghent icon font see the notes on fonts.
<i class="icon-{{ icon }}" aria-hidden="true"></i>
<!-- Age -->
<i class="icon-age" aria-hidden="true"></i>
<!-- Arrow Down -->
<i class="icon-arrow-down" aria-hidden="true"></i>
<!-- Arrow Left -->
<i class="icon-arrow-left" aria-hidden="true"></i>
<!-- Arrow Right -->
<i class="icon-arrow-right" aria-hidden="true"></i>
<!-- Arrow Right Top -->
<i class="icon-arrow-right-top" aria-hidden="true"></i>
<!-- Arrow Up -->
<i class="icon-arrow-up" aria-hidden="true"></i>
<!-- Basket -->
<i class="icon-basket" aria-hidden="true"></i>
<!-- Broken Link -->
<i class="icon-broken-link" aria-hidden="true"></i>
<!-- Calendar -->
<i class="icon-calendar" aria-hidden="true"></i>
<!-- Cart -->
<i class="icon-cart" aria-hidden="true"></i>
<!-- Chat -->
<i class="icon-chat" aria-hidden="true"></i>
<!-- Chat Round -->
<i class="icon-chat-round" aria-hidden="true"></i>
<!-- Checkmark -->
<i class="icon-checkmark" aria-hidden="true"></i>
<!-- Checkmark Checkbox -->
<i class="icon-checkmark-checkbox" aria-hidden="true"></i>
<!-- Checkmark Circle -->
<i class="icon-checkmark-circle" aria-hidden="true"></i>
<!-- Chevron Down -->
<i class="icon-chevron-down" aria-hidden="true"></i>
<!-- Chevron Left -->
<i class="icon-chevron-left" aria-hidden="true"></i>
<!-- Chevron Right -->
<i class="icon-chevron-right" aria-hidden="true"></i>
<!-- Chevron Up -->
<i class="icon-chevron-up" aria-hidden="true"></i>
<!-- Civil Affairs -->
<i class="icon-civil-affairs" aria-hidden="true"></i>
<!-- Clock -->
<i class="icon-clock" aria-hidden="true"></i>
<!-- Contact -->
<i class="icon-contact" aria-hidden="true"></i>
<!-- Cross -->
<i class="icon-cross" aria-hidden="true"></i>
<!-- Cross Circle -->
<i class="icon-cross-circle" aria-hidden="true"></i>
<!-- Culture -->
<i class="icon-culture" aria-hidden="true"></i>
<!-- District 09 -->
<i class="icon-district09" aria-hidden="true"></i>
<!-- Document -->
<i class="icon-document" aria-hidden="true"></i>
<!-- Download -->
<i class="icon-download" aria-hidden="true"></i>
<!-- Education -->
<i class="icon-education" aria-hidden="true"></i>
<!-- Envelope -->
<i class="icon-envelope" aria-hidden="true"></i>
<!-- Environment -->
<i class="icon-environment" aria-hidden="true"></i>
<!-- Euro -->
<i class="icon-euro" aria-hidden="true"></i>
<!-- Exclamation -->
<i class="icon-exclamation" aria-hidden="true"></i>
<!-- Exclamation Circle -->
<i class="icon-exclamation-circle" aria-hidden="true"></i>
<!-- Facebook -->
<i class="icon-facebook" aria-hidden="true"></i>
<!-- Favicon -->
<i class="icon-favicon" aria-hidden="true"></i>
<!-- Fax -->
<i class="icon-fax" aria-hidden="true"></i>
<!-- Filter -->
<i class="icon-filter" aria-hidden="true"></i>
<!-- Flickr -->
<i class="icon-flickr" aria-hidden="true"></i>
<!-- For Children -->
<i class="icon-for-children" aria-hidden="true"></i>
<!-- Fullscreen Enter -->
<i class="icon-fullscreen-enter" aria-hidden="true"></i>
<!-- Fullscreen Exit -->
<i class="icon-fullscreen-exit" aria-hidden="true"></i>
<!-- Ghent -->
<i class="icon-ghent" aria-hidden="true"></i>
<!-- Globe -->
<i class="icon-globe" aria-hidden="true"></i>
<!-- Googleplus -->
<i class="icon-googleplus" aria-hidden="true"></i>
<!-- Gsport -->
<i class="icon-gsport" aria-hidden="true"></i>
<!-- Hamburger -->
<i class="icon-hamburger" aria-hidden="true"></i>
<!-- Health -->
<i class="icon-health" aria-hidden="true"></i>
<!-- Heart -->
<i class="icon-heart" aria-hidden="true"></i>
<!-- Home -->
<i class="icon-home" aria-hidden="true"></i>
<!-- Image -->
<i class="icon-image" aria-hidden="true"></i>
<!-- Info -->
<i class="icon-info" aria-hidden="true"></i>
<!-- Info Circle -->
<i class="icon-info-circle" aria-hidden="true"></i>
<!-- Instagram -->
<i class="icon-instagram" aria-hidden="true"></i>
<!-- Layers -->
<i class="icon-layers" aria-hidden="true"></i>
<!-- Level -->
<i class="icon-level" aria-hidden="true"></i>
<!-- Lightning -->
<i class="icon-lightning" aria-hidden="true"></i>
<!-- Link -->
<i class="icon-link" aria-hidden="true"></i>
<!-- Linkedin -->
<i class="icon-linkedin" aria-hidden="true"></i>
<!-- Living -->
<i class="icon-living" aria-hidden="true"></i>
<!-- Lock Closed -->
<i class="icon-lock-closed" aria-hidden="true"></i>
<!-- Lock Open -->
<i class="icon-lock-open" aria-hidden="true"></i>
<!-- Logo En -->
<i class="icon-logo-en" aria-hidden="true"></i>
<!-- Logo Es -->
<i class="icon-logo-es" aria-hidden="true"></i>
<!-- Logo Fr -->
<i class="icon-logo-fr" aria-hidden="true"></i>
<!-- Logo Nl -->
<i class="icon-logo-nl" aria-hidden="true"></i>
<!-- Logo Sp -->
<i class="icon-logo-sp" aria-hidden="true"></i>
<!-- Map -->
<i class="icon-map" aria-hidden="true"></i>
<!-- Marker -->
<i class="icon-marker" aria-hidden="true"></i>
<!-- Minus -->
<i class="icon-minus" aria-hidden="true"></i>
<!-- Mobility -->
<i class="icon-mobility" aria-hidden="true"></i>
<!-- Music -->
<i class="icon-music" aria-hidden="true"></i>
<!-- Next -->
<i class="icon-next" aria-hidden="true"></i>
<!-- Normalphone -->
<i class="icon-normalphone" aria-hidden="true"></i>
<!-- Pause -->
<i class="icon-pause" aria-hidden="true"></i>
<!-- Pencil -->
<i class="icon-pencil" aria-hidden="true"></i>
<!-- Phone -->
<i class="icon-phone" aria-hidden="true"></i>
<!-- Pinterest -->
<i class="icon-pinterest" aria-hidden="true"></i>
<!-- Play -->
<i class="icon-play" aria-hidden="true"></i>
<!-- Plus -->
<i class="icon-plus" aria-hidden="true"></i>
<!-- Previous -->
<i class="icon-previous" aria-hidden="true"></i>
<!-- Question -->
<i class="icon-question" aria-hidden="true"></i>
<!-- Question Circle -->
<i class="icon-question-circle" aria-hidden="true"></i>
<!-- Readspeaker -->
<i class="icon-readspeaker" aria-hidden="true"></i>
<!-- Refresh -->
<i class="icon-refresh" aria-hidden="true"></i>
<!-- Search -->
<i class="icon-search" aria-hidden="true"></i>
<!-- Settings -->
<i class="icon-settings" aria-hidden="true"></i>
<!-- Share -->
<i class="icon-share" aria-hidden="true"></i>
<!-- Shopping -->
<i class="icon-shopping" aria-hidden="true"></i>
<!-- Sign Language -->
<i class="icon-sign-language" aria-hidden="true"></i>
<!-- Size -->
<i class="icon-size" aria-hidden="true"></i>
<!-- Spoken Language -->
<i class="icon-spoken-language" aria-hidden="true"></i>
<!-- Sportclub -->
<i class="icon-sportclub" aria-hidden="true"></i>
<!-- Star Empty -->
<i class="icon-star-empty" aria-hidden="true"></i>
<!-- Star Full -->
<i class="icon-star-full" aria-hidden="true"></i>
<!-- Star Half -->
<i class="icon-star-half" aria-hidden="true"></i>
<!-- Stop -->
<i class="icon-stop" aria-hidden="true"></i>
<!-- Subscribe -->
<i class="icon-subscribe" aria-hidden="true"></i>
<!-- Tag -->
<i class="icon-tag" aria-hidden="true"></i>
<!-- Target -->
<i class="icon-target" aria-hidden="true"></i>
<!-- Threads -->
<i class="icon-threads" aria-hidden="true"></i>
<!-- Tiktok -->
<i class="icon-tiktok" aria-hidden="true"></i>
<!-- Trashcan -->
<i class="icon-trashcan" aria-hidden="true"></i>
<!-- Twitter -->
<i class="icon-twitter" aria-hidden="true"></i>
<!-- Twitter Outline -->
<i class="icon-twitter-outline" aria-hidden="true"></i>
<!-- Uit Met Vlieg -->
<i class="icon-uit-met-vlieg" aria-hidden="true"></i>
<!-- Uitpas -->
<i class="icon-uitpas" aria-hidden="true"></i>
<!-- Update -->
<i class="icon-update" aria-hidden="true"></i>
<!-- Url -->
<i class="icon-url" aria-hidden="true"></i>
<!-- User -->
<i class="icon-user" aria-hidden="true"></i>
<!-- Users -->
<i class="icon-users" aria-hidden="true"></i>
<!-- View Grid -->
<i class="icon-view-grid" aria-hidden="true"></i>
<!-- View List -->
<i class="icon-view-list" aria-hidden="true"></i>
<!-- Vimeo -->
<i class="icon-vimeo" aria-hidden="true"></i>
<!-- Virus -->
<i class="icon-virus" aria-hidden="true"></i>
<!-- Whatsapp -->
<i class="icon-whatsapp" aria-hidden="true"></i>
<!-- Wheelchair -->
<i class="icon-wheelchair" aria-hidden="true"></i>
<!-- Wheelchair No -->
<i class="icon-wheelchair-no" aria-hidden="true"></i>
<!-- Work -->
<i class="icon-work" aria-hidden="true"></i>
<!-- Youtube -->
<i class="icon-youtube" aria-hidden="true"></i>
/* Age */
{
"icon": "age"
}
/* Arrow Down */
{
"icon": "arrow-down"
}
/* Arrow Left */
{
"icon": "arrow-left"
}
/* Arrow Right */
{
"icon": "arrow-right"
}
/* Arrow Right Top */
{
"icon": "arrow-right-top"
}
/* Arrow Up */
{
"icon": "arrow-up"
}
/* Basket */
{
"icon": "basket"
}
/* Broken Link */
{
"icon": "broken-link"
}
/* Calendar */
{
"icon": "calendar"
}
/* Cart */
{
"icon": "cart"
}
/* Chat */
{
"icon": "chat"
}
/* Chat Round */
{
"icon": "chat-round"
}
/* Checkmark */
{
"icon": "checkmark"
}
/* Checkmark Checkbox */
{
"icon": "checkmark-checkbox"
}
/* Checkmark Circle */
{
"icon": "checkmark-circle"
}
/* Chevron Down */
{
"icon": "chevron-down"
}
/* Chevron Left */
{
"icon": "chevron-left"
}
/* Chevron Right */
{
"icon": "chevron-right"
}
/* Chevron Up */
{
"icon": "chevron-up"
}
/* Civil Affairs */
{
"icon": "civil-affairs"
}
/* Clock */
{
"icon": "clock"
}
/* Contact */
{
"icon": "contact"
}
/* Cross */
{
"icon": "cross"
}
/* Cross Circle */
{
"icon": "cross-circle"
}
/* Culture */
{
"icon": "culture"
}
/* District 09 */
{
"icon": "district09"
}
/* Document */
{
"icon": "document"
}
/* Download */
{
"icon": "download"
}
/* Education */
{
"icon": "education"
}
/* Envelope */
{
"icon": "envelope"
}
/* Environment */
{
"icon": "environment"
}
/* Euro */
{
"icon": "euro"
}
/* Exclamation */
{
"icon": "exclamation"
}
/* Exclamation Circle */
{
"icon": "exclamation-circle"
}
/* Facebook */
{
"icon": "facebook"
}
/* Favicon */
{
"icon": "favicon"
}
/* Fax */
{
"icon": "fax"
}
/* Filter */
{
"icon": "filter"
}
/* Flickr */
{
"icon": "flickr"
}
/* For Children */
{
"icon": "for-children"
}
/* Fullscreen Enter */
{
"icon": "fullscreen-enter"
}
/* Fullscreen Exit */
{
"icon": "fullscreen-exit"
}
/* Ghent */
{
"icon": "ghent"
}
/* Globe */
{
"icon": "globe"
}
/* Googleplus */
{
"icon": "googleplus"
}
/* Gsport */
{
"icon": "gsport"
}
/* Hamburger */
{
"icon": "hamburger"
}
/* Health */
{
"icon": "health"
}
/* Heart */
{
"icon": "heart"
}
/* Home */
{
"icon": "home"
}
/* Image */
{
"icon": "image"
}
/* Info */
{
"icon": "info"
}
/* Info Circle */
{
"icon": "info-circle"
}
/* Instagram */
{
"icon": "instagram"
}
/* Layers */
{
"icon": "layers"
}
/* Level */
{
"icon": "level"
}
/* Lightning */
{
"icon": "lightning"
}
/* Link */
{
"icon": "link"
}
/* Linkedin */
{
"icon": "linkedin"
}
/* Living */
{
"icon": "living"
}
/* Lock Closed */
{
"icon": "lock-closed"
}
/* Lock Open */
{
"icon": "lock-open"
}
/* Logo En */
{
"icon": "logo-en"
}
/* Logo Es */
{
"icon": "logo-es"
}
/* Logo Fr */
{
"icon": "logo-fr"
}
/* Logo Nl */
{
"icon": "logo-nl"
}
/* Logo Sp */
{
"icon": "logo-sp"
}
/* Map */
{
"icon": "map"
}
/* Marker */
{
"icon": "marker"
}
/* Minus */
{
"icon": "minus"
}
/* Mobility */
{
"icon": "mobility"
}
/* Music */
{
"icon": "music"
}
/* Next */
{
"icon": "next"
}
/* Normalphone */
{
"icon": "normalphone"
}
/* Pause */
{
"icon": "pause"
}
/* Pencil */
{
"icon": "pencil"
}
/* Phone */
{
"icon": "phone"
}
/* Pinterest */
{
"icon": "pinterest"
}
/* Play */
{
"icon": "play"
}
/* Plus */
{
"icon": "plus"
}
/* Previous */
{
"icon": "previous"
}
/* Question */
{
"icon": "question"
}
/* Question Circle */
{
"icon": "question-circle"
}
/* Readspeaker */
{
"icon": "readspeaker"
}
/* Refresh */
{
"icon": "refresh"
}
/* Search */
{
"icon": "search"
}
/* Settings */
{
"icon": "settings"
}
/* Share */
{
"icon": "share"
}
/* Shopping */
{
"icon": "shopping"
}
/* Sign Language */
{
"icon": "sign-language"
}
/* Size */
{
"icon": "size"
}
/* Spoken Language */
{
"icon": "spoken-language"
}
/* Sportclub */
{
"icon": "sportclub"
}
/* Star Empty */
{
"icon": "star-empty"
}
/* Star Full */
{
"icon": "star-full"
}
/* Star Half */
{
"icon": "star-half"
}
/* Stop */
{
"icon": "stop"
}
/* Subscribe */
{
"icon": "subscribe"
}
/* Tag */
{
"icon": "tag"
}
/* Target */
{
"icon": "target"
}
/* Threads */
{
"icon": "threads"
}
/* Tiktok */
{
"icon": "tiktok"
}
/* Trashcan */
{
"icon": "trashcan"
}
/* Twitter */
{
"icon": "twitter"
}
/* Twitter Outline */
{
"icon": "twitter-outline"
}
/* Uit Met Vlieg */
{
"icon": "uit-met-vlieg"
}
/* Uitpas */
{
"icon": "uitpas"
}
/* Update */
{
"icon": "update"
}
/* Url */
{
"icon": "url"
}
/* User */
{
"icon": "user"
}
/* Users */
{
"icon": "users"
}
/* View Grid */
{
"icon": "view-grid"
}
/* View List */
{
"icon": "view-list"
}
/* Vimeo */
{
"icon": "vimeo"
}
/* Virus */
{
"icon": "virus"
}
/* Whatsapp */
{
"icon": "whatsapp"
}
/* Wheelchair */
{
"icon": "wheelchair"
}
/* Wheelchair No */
{
"icon": "wheelchair-no"
}
/* Work */
{
"icon": "work"
}
/* Youtube */
{
"icon": "youtube"
}
# Icon
## Add new icons
To add a new icon, do the following:
- Add svg icon to public/styleguide/img/iconfont
- Add icon name to icon.config.js in this dir
- Run gulp build