Icon

Icon

When to use this component

Icons are used for decorative purposes only.

When not to use this component

Icons cannot be used as the only means to convey the information.

The Ghent icon font

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.

Web accessibility

  • Icons must have the aria-hidden=true attribute.
<i class="icon-{{ icon }}" 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 Up -->
<i class="icon-arrow-up" aria-hidden="true"></i>

<!-- Calendar -->
<i class="icon-calendar" aria-hidden="true"></i>

<!-- Chat Round -->
<i class="icon-chat-round" aria-hidden="true"></i>

<!-- Chat -->
<i class="icon-chat" 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>

<!-- Checkmark -->
<i class="icon-checkmark" 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>

<!-- Clock -->
<i class="icon-clock" aria-hidden="true"></i>

<!-- Cross -->
<i class="icon-cross" aria-hidden="true"></i>

<!-- Digipolis -->
<i class="icon-digipolis" aria-hidden="true"></i>

<!-- Document -->
<i class="icon-document" aria-hidden="true"></i>

<!-- Download -->
<i class="icon-download" aria-hidden="true"></i>

<!-- Envelope -->
<i class="icon-envelope" aria-hidden="true"></i>

<!-- Exclamation Circle -->
<i class="icon-exclamation-circle" aria-hidden="true"></i>

<!-- Exclamation -->
<i class="icon-exclamation" aria-hidden="true"></i>

<!-- External Link -->
<i class="icon-external-link" aria-hidden="true"></i>

<!-- Facebook -->
<i class="icon-facebook" aria-hidden="true"></i>

<!-- Fancyback -->
<i class="icon-fancyback" 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>

<!-- Globe -->
<i class="icon-globe" aria-hidden="true"></i>

<!-- Googleplus -->
<i class="icon-googleplus" aria-hidden="true"></i>

<!-- Hamburger -->
<i class="icon-hamburger" 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>

<!-- Instagram -->
<i class="icon-instagram" aria-hidden="true"></i>

<!-- Lightning -->
<i class="icon-lightning" aria-hidden="true"></i>

<!-- Linkedin -->
<i class="icon-linkedin" 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>

<!-- Marker -->
<i class="icon-marker" aria-hidden="true"></i>

<!-- Minus -->
<i class="icon-minus" aria-hidden="true"></i>

<!-- Normalphone -->
<i class="icon-normalphone" aria-hidden="true"></i>

<!-- Phone -->
<i class="icon-phone" aria-hidden="true"></i>

<!-- Plus -->
<i class="icon-plus" aria-hidden="true"></i>

<!-- Readspeaker -->
<i class="icon-readspeaker" aria-hidden="true"></i>

<!-- Search -->
<i class="icon-search" aria-hidden="true"></i>

<!-- Share -->
<i class="icon-share" 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>

<!-- Twitter Outline -->
<i class="icon-twitter-outline" aria-hidden="true"></i>

<!-- Twitter -->
<i class="icon-twitter" aria-hidden="true"></i>

<!-- User -->
<i class="icon-user" aria-hidden="true"></i>

<!-- Url -->
<i class="icon-url" aria-hidden="true"></i>

<!-- Vimeo -->
<i class="icon-vimeo" aria-hidden="true"></i>

<!-- Youtube -->
<i class="icon-youtube" aria-hidden="true"></i>

/* Arrow Down */
{
  "icon": "arrow-down"
}

/* Arrow Left */
{
  "icon": "arrow-left"
}

/* Arrow Right */
{
  "icon": "arrow-right"
}

/* Arrow Up */
{
  "icon": "arrow-up"
}

/* Calendar */
{
  "icon": "calendar"
}

/* Chat Round */
{
  "icon": "chat-round"
}

/* Chat */
{
  "icon": "chat"
}

/* Checkmark Checkbox */
{
  "icon": "checkmark-checkbox"
}

/* Checkmark Circle */
{
  "icon": "checkmark-circle"
}

/* Checkmark */
{
  "icon": "checkmark"
}

/* Chevron Down */
{
  "icon": "chevron-down"
}

/* Chevron Left */
{
  "icon": "chevron-left"
}

/* Chevron Right */
{
  "icon": "chevron-right"
}

/* Chevron Up */
{
  "icon": "chevron-up"
}

/* Clock */
{
  "icon": "clock"
}

/* Cross */
{
  "icon": "cross"
}

/* Digipolis */
{
  "icon": "digipolis"
}

/* Document */
{
  "icon": "document"
}

/* Download */
{
  "icon": "download"
}

/* Envelope */
{
  "icon": "envelope"
}

/* Exclamation Circle */
{
  "icon": "exclamation-circle"
}

/* Exclamation */
{
  "icon": "exclamation"
}

/* External Link */
{
  "icon": "external-link"
}

/* Facebook */
{
  "icon": "facebook"
}

/* Fancyback */
{
  "icon": "fancyback"
}

/* Favicon */
{
  "icon": "favicon"
}

/* Fax */
{
  "icon": "fax"
}

/* Filter */
{
  "icon": "filter"
}

/* Flickr */
{
  "icon": "flickr"
}

/* Globe */
{
  "icon": "globe"
}

/* Googleplus */
{
  "icon": "googleplus"
}

/* Hamburger */
{
  "icon": "hamburger"
}

/* Heart */
{
  "icon": "heart"
}

/* Home */
{
  "icon": "home"
}

/* Image */
{
  "icon": "image"
}

/* Instagram */
{
  "icon": "instagram"
}

/* Lightning */
{
  "icon": "lightning"
}

/* Linkedin */
{
  "icon": "linkedin"
}

/* 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"
}

/* Marker */
{
  "icon": "marker"
}

/* Minus */
{
  "icon": "minus"
}

/* Normalphone */
{
  "icon": "normalphone"
}

/* Phone */
{
  "icon": "phone"
}

/* Plus */
{
  "icon": "plus"
}

/* Readspeaker */
{
  "icon": "readspeaker"
}

/* Search */
{
  "icon": "search"
}

/* Share */
{
  "icon": "share"
}

/* Star Empty */
{
  "icon": "star-empty"
}

/* Star Full */
{
  "icon": "star-full"
}

/* Star Half */
{
  "icon": "star-half"
}

/* Twitter Outline */
{
  "icon": "twitter-outline"
}

/* Twitter */
{
  "icon": "twitter"
}

/* User */
{
  "icon": "user"
}

/* Url */
{
  "icon": "url"
}

/* Vimeo */
{
  "icon": "vimeo"
}

/* Youtube */
{
  "icon": "youtube"
}