Guidelines

Iconography

How to use

Please check documentation on Webtools site:

https://webtools.europa.eu/showcase/demo/?comp=icons&section=about&demo=how_to_use

ECL icons

  • arrow-down
  • arrow-downup
  • arrow-left
  • arrow-right-bold
  • arrow-right
  • arrow-up
  • audio
  • book
  • brochure
  • budget
  • calendar
  • camera
  • chain
  • check-bold
  • check-filled
  • check
  • clock-filled
  • clock
  • close-bold
  • close-filled
  • close-outline
  • close
  • copy
  • corner-arrow-down
  • corner-arrow-left
  • corner-arrow-right
  • corner-arrow-up
  • corner-arrow
  • crosshair
  • data
  • digital
  • document
  • download
  • edit
  • email
  • energy
  • error-filled
  • error-outline
  • error
  • euro
  • event
  • external-events
  • external
  • eye
  • faq
  • feedback
  • file-blank
  • file
  • folder
  • fullscreen
  • global
  • growth
  • hamburger
  • image
  • infographic
  • information-filled
  • information-outline
  • information-round
  • information
  • laco-filled
  • laco
  • list
  • livestreaming
  • location-filled
  • location
  • log-in-outline
  • log-in
  • logged-in
  • minus-outline
  • minus
  • move
  • multiple-files
  • notification-active
  • notification
  • organigram
  • package
  • pause-filled
  • pause-outline
  • pause
  • play-filled
  • play-outline
  • play
  • plus-filled
  • plus-outline
  • plus
  • presentation
  • print
  • question
  • refresh
  • regulation
  • rss
  • search
  • settings
  • share-filled
  • share
  • shopping-bag
  • solid-arrow-down
  • solid-arrow-left
  • solid-arrow-right
  • solid-arrow-up
  • solid-arrow
  • sort-carets
  • spinner
  • spreadsheet
  • star-filled
  • star-outline
  • success-filled
  • success-outline
  • tag
  • trash
  • upload
  • warning-filled
  • warning-outline
  • warning-round
  • warning

Social media icons

  • blog
  • bluesky
  • chain
  • email
  • facebook
  • flickr
  • foursquare
  • gmail
  • instagram
  • linkedin
  • mastodon
  • messenger
  • pinterest
  • qzone
  • reddit
  • rss
  • skype
  • sms
  • spotify
  • telegram
  • threads
  • typepad
  • vimeo
  • weibo
  • whatsapp
  • x
  • yahoomail
  • yammer
  • youtube

Flag icons (EU members)

  • at (Austria)
  • be (Belgium)
  • bg (Bulgaria)
  • cy (Cyprus)
  • cz (Czech Republic)
  • de (Germany)
  • dk (Denmark)
  • ee (Estonia)
  • el (Greece)
  • es (Spain)
  • eu (European Union)
  • fi (Finland)
  • fr (France)
  • hr (Croatia)
  • hu (Hungary)
  • ie (Ireland)
  • it (Italy)
  • lt (Lithuania)
  • lu (Luxembourg)
  • lv (Latvia)
  • mt (Malta)
  • nl (Netherlands)
  • pl (Poland)
  • pt (Portugal)
  • ro (Romania)
  • se (Sweden)
  • si (Slovenia)
  • sk (Slovakia)

Icon colour

Every non coloured icons (apprearing grey here) could be colorized using the text colours utilities