Webtools showcase

Home / icons / about / how to use

Switch to

Don't forget to include the Webtools Smart Loader (load.js).

Demo

Specify the markup, the family group (optional) and the name of the icon (mandatory). 

<span class="wt-icon-{family}--{name}"></span>

Now, the Webtools icons can be safely used with no stress ;-)

<!-- Icons 2024 -->
<span class="wt-icon--clock"></span>

<!-- Icons 2022 -->
<span class="wt-icon-clock wt-icon--primary"></span>

<!-- Networks icons -->
<b class="wt-icon-networks--facebook"></b>
<b class="wt-icon-networks--instagram"></b>

<!-- Flags collection -->
<i class="wt-icon-flag--eu"></i>
<i class="wt-icon-flag--be"></i>

<!-- Unexisting -->
<span class="wt-icon--unexisting"></span>

About

  1. Icons are grouped by family. List of families and icons:
    https://webtools.europa.eu/js/icons.json
  2. Any markup tag can be used (inline markup is recommended).
  3. No need to define the UEC (Unified Embed Code). The icon is automatically loaded based on the Webtools CSS class matcher (ex: "wt-icon--").
  4. The icon process is SPA (Single Page Application), CSP (Content Security Policy) and CORS (Cross-origin) compliant.
Create a temporary wcloud widget