@lovable.dev/ai-disclosure

The official EU icons for labelling AI-generated content as a React component, for disclosing AI-generated or AI-manipulated content under the AI Act (Article 50) transparency rules.

The SVGs are the unmodified official set published by the European Commission (Section 2 of the Code of Practice on marking and labelling of AI-generated content), converted to inline-styled React components so multiple variants can coexist on one page.

Usage

AIDisclosureIcon is the package's single entry point.

import { AIDisclosureIcon } from "@lovable.dev/ai-disclosure";

// Basic icon — AI was involved, or paired with a custom text label
<AIDisclosureIcon />

// Fully AI-generated content (no human-created elements or editorial control)
<AIDisclosureIcon type="ai-generated" />

// Human-made content partially modified with AI, white 50%-transparent variant
<AIDisclosureIcon type="ai-modified" color="white" transparent />

| Prop | Type | Default | Notes | | --- | --- | --- | --- | | type | "ai" \| "ai-generated" \| "ai-modified" | "ai" | Which official icon to render | | color | "black" \| "white" | "black" | The two official color variants | | transparent | boolean | false | The official 50%-transparency variants | | size | number | 20 (26 for corner placements) | Artwork height in px | | placement | "inline" \| "top-left" \| "top-right" \| "bottom-left" \| "bottom-right" | "inline" | Render inline, or overlay a corner of the parent element | | containerRadius | number \| "circle" | 0 | The parent's border-radius in px, or "circle" for a circular parent such as an avatar (corner placements) | | padding | number \| "inside" \| "on-border" | "inside" | "inside" keeps a gap of 15% of size to the nearest parent boundary, a number sets that gap in px, "on-border" centers the icon on the boundary (corner placements) | | ...rest | SVGProps<SVGSVGElement> | | Spread onto the <svg>, so className, aria-label, etc. override defaults |

The component ships a default role="img" + aria-label per the EU accessibility guidance; override aria-label to match your context.

Corner placements

Pass a corner placement to overlay a corner of the parent element without affecting layout — the icon positions absolutely, and a statically-positioned parent is given position: relative so it becomes the anchor:

<div className="testimonial-card">
  …
  <AIDisclosureIcon placement="bottom-right" containerRadius={16} />
</div>

<div className="avatar">
  <img … />
  <AIDisclosureIcon placement="bottom-right" padding="on-border" containerRadius="circle" />
</div>

With padding: "inside" (or a number), the icon keeps that gap to the nearest parent boundary. On rounded corners it slides inward just enough to clear the curve; the pill-shaped labels always keep the gap to the top/bottom edge and only shift sideways when the corner curve demands it. On a circular container the pill is centered horizontally.

containerRadius must be the effective rendered radius: CSS shrinks a border-radius larger than the box allows (e.g. 96 on a 130px-tall box renders as 65), so pass what actually renders — or "circle" for circular parents.

With padding: "on-border", the icon is centered on the parent's boundary: the round icon sits on the corner curve (on a circular container, on the circle's edge), and the pill-shaped labels straddle the top/bottom edge just past the curve. On a circular container the pill straddles the rim's top/bottom point, centered horizontally.

Sizing

The EU does not mandate a pixel size — the requirement is that the icon is "clearly perceivable and distinguishable" and "in a clearly visible size" at first exposure to the content. The 20px default is this package's choice, not an EU rule. size is the height of the visible artwork, so equal sizes render equal visual heights across all variants. Placement rules (no overlays on top, embedded so it survives reshare/download, visible at first exposure) are summarized on the official page linked above.

Raw SVGs

The unmodified official white variants are shipped under svg/ (e.g. @lovable.dev/ai-disclosure/svg/ai-generated-white.svg) for use outside React; they are also the geometry source for the bundled icon data (which crops their viewBoxes to the artwork). The color variants differ only in fills and badge opacity, which the React component applies at render time.