eu-ai-label-iconfont

All Icons

Features

Quick Start

Web

NPM

Install the package:

npm install eu-ai-label-iconfont

Import the CSS in your project:

import 'eu-ai-label-iconfont/dist/eu-ai-label-iconfont.css';

Manual

Copy the font files to your assets folder:

# eu-ai-label-iconfont.css, eu-ai-label-iconfont.ttf, eu-ai-label-iconfont.woff2
cp dist/eu-ai-label-iconfont.* your-project/assets/

Include the CSS and use the helper classes:

<!-- sizes: sm, md, lg, xl, 2xl, 3xl -->
<link rel="stylesheet" href="eu-ai-label-iconfont.css">

<i class="ai-icon ai-icon--ai ai-icon--xl"
   role="img" aria-label="AI content"></i>
<i class="ai-icon ai-icon--ai-modified ai-icon--xl"
   role="img" aria-label="AI modified content"></i>
<i class="ai-icon ai-icon--ai-generated ai-icon--xl"
   role="img" aria-label="AI generated content"></i>

Desktop

macOS: double-click eu-ai-label-iconfont.ttf → “Install Font”.

Windows: right-click eu-ai-label-iconfont.ttf → “Install”.

Linux:

cp eu-ai-label-iconfont.ttf ~/.local/share/fonts/
fc-cache -fv

Accessibility

EU AI Act labels should be perceivable and understandable for everyone. The examples below show how to meet common accessibility guidelines.

1. Visible size and plain language

<i class="ai-icon ai-icon--ai-generated ai-icon--lg"
   role="img" aria-label="AI generated content"></i>
<span>AI-generated content</span>

Accompany it with a plain-language label. Avoid abbreviations other than “AI” — do not use “aig”, “aim”, or other jargon as the visible label.

2. Assistive technologies

<i class="ai-icon ai-icon--ai-modified ai-icon--lg"
   aria-hidden="true"></i>
<span>AI modified content</span>

If the visible text already describes the label, hide the icon from assistive technology with aria-hidden="true". Otherwise give the icon role="img" and an aria-label that states the disclosure clearly, e.g. “AI-generated image” or “Content modified by AI”.

3. Disclosure duration

If the disclosure appears only for a limited time, keep it visible long enough to be read and understood. Do not use short auto-dismiss timeouts.

4. Second interactive layer

AI-generated content

This image was generated by an AI system. It may contain inaccuracies or depict people, places, or events that did not happen.

<details class="a11y-details">
  <summary>
    <i class="ai-icon ai-icon--ai-generated ai-icon--lg"
       aria-hidden="true"></i>
    <span>AI-generated content</span>
  </summary>
  <div>
    <p>This image was generated by an AI system...</p>
  </div>
</details>

The <details> element provides a built-in second layer that is keyboard-focusable and announced by assistive technologies. The icon visually indicates that more information is available while the visible label clearly states the disclosure.

Usage Examples

1. CSS helper classes (recommended)

<i class="ai-icon ai-icon--ai ai-icon--xl"
   style="color:#0066cc"
   role="img" aria-label="AI content"></i>

2. HTML character entities

<span class="ai-icon"
      role="img" aria-label="AI content"
      style="font-size:48px; color:#0066cc">&#xE001;</span>

3. Ligatures

Any text node with the font family can trigger the ligature:

<!-- .ai-icon sets text-rendering: optimizeLegibility, which enables standard ligatures -->

<span class="ai-icon" role="img"
      aria-label="AI generated content"
      style="font-size:48px">aig</span>

4. CSS content value

.my-icon::before {
  font-family: 'eu-ai-label-iconfont';
  content: "\e001";
}

<span class="my-icon" role="img"
      aria-label="AI content"></span>

Colors

Sizes

Character Reference

Icon	Unicode	HTML	CSS content	Class	Ligature
	U+E001		"\e001"	ai-icon--ai	ai
	U+E002		"\e002"	ai-icon--ai-modified	aim
	U+E003		"\e003"	ai-icon--ai-generated	aig

Python

Inspect the built font with fontTools:

from fontTools.ttLib import TTFont

font = TTFont('eu-ai-label-iconfont.ttf')
cmap = font.getBestCmap()
for code, name in sorted(cmap.items()):
    print(f'U+{code:04X} → {name}')

License & Attribution

Icons: Designed by the European Union for the EU Artificial Intelligence Act and released under the EUPL.

The icon designs remain the property of the European Union. Font files and code are generated from the public SVG sources and may be used freely.

TTF/OTF fonts do not support transparency — use the SVG sources directly if you need transparent backgrounds.