Components

AI disclosure label.

The EU AI Act transparency icon, used exactly as the European Commission publishes it — not redrawn. Marks content that involves, is generated by, or was modified with AI, visibly for people and machine-readably for systems.

EU AI Act — Article 50, effective 2 August 2026

Users must be told when content is AI-generated or AI-modified.

This component uses the official EU icon set — freely usable without attribution — so every Aceve surface shows the same mark regulators and users are told to expect. See AI patterns for the wider disclosure and receipt strategy.

Variants

Pick the one that matches how the content was actually made. Each official asset bakes in its own text — never add a second label next to it.

variantEU iconWhen to use

basicBasicGeneral AI involvement — e.g. a deepfake, or text produced with AI assistance short of full generation.

generatedFully AI-GeneratedEntirely AI-created content, with no human authorship of the underlying work.

modifiedPartially AI-ModifiedHuman-made content that was substantively altered using AI.

Placement

Six rules from the compliance brief, distilled to do / don't.

Show it the moment the content first appears

Bake the icon into the file itself when technically feasible

Keep the label visible if the file is downloaded or reshared

Pair the icon with plain language, like “AI”

Hide it at the bottom of a long scroll or behind a menu

Default to a UI overlay when embedding is possible

Let the icon disappear once content leaves the app

Use jargon like “LLM-generated” or “synthetic media”

Don't

When embedding directly into an image or video isn't technically feasible, use placement="overlay" to pin the badge in a corner over the media — it should still travel with the file if it's exported or downloaded.

Overlay placement

Example media

Light / dark

Inline badges follow the site theme; overlay badges default to the white-on-black variant, since content behind them is rarely the same colour as the docs canvas.

theme="light"

theme="dark"

Accessibility

A real <img>, not a background image — so it has a name assistive tech can read.

altDefaults to the variant’s plain-language text — "AI", "AI-generated", "AI-modified" — matching what’s drawn in the icon. Override only if the surrounding sentence already says it.

No separate labelThe official asset bakes its own text into the graphic at a fixed aspect ratio — never crop it to a square or pair it with a second, different-looking label.

ContrastShips in black and white; pick whichever sits at or above WCAG AA contrast against the surface behind it — use theme="auto" to let it follow the site’s light/dark mode.

Props (React)

type AiDisclosureLabelProps = {
  variant?: "basic" | "generated" | "modified";
  placement?: "inline" | "overlay";
  theme?: "auto" | "light" | "dark"; // default: auto for inline, dark for overlay
  alt?: string;                       // override the default plain-language alt text
  size?: number;                      // icon height in px — default 24, width follows the official aspect ratio
};

← PreviousNumeric input Next →Data grid