AiIconLabelBasic, fully generated, and partially modified icon mappings with accessible names.
REACT + TYPESCRIPT · OFFICIAL EU ICON ASSETS
Ship a clear AI label
without inventing the UI.
Five accessible disclosure components, all 12 official EU SVG variants, responsive CSS, semantic tests, a Vite demo, and an integration checklist.
English · React 19 + TypeScript · source-checked 13 July 2026 · no API or trackingEXAMPLE MEDIA
Partially AI-modified
AI content
Fully AI-generatedHow AI was usedPurpose · human review · limitations · contact
01Choose
Map basic, fully generated, or partially modified meaning
02Place
Render at first exposure without overlay conflicts
03Explain
Add plain-language text and an accessible second layer
04Test
Verify assistive tech, mobile, share, export, and download paths
WHY THIS KIT
The official assets solve the icon. Product teams still need the interface.
- The EU icon page provides 12 freely usable SVG variants
- User testing performed better when the icon had a companion text label
- Official guidance encourages alt text or ARIA labels and accessible second layers
- Visible labels do not replace provider-side machine-readable marking
5 COMPONENTS · 12 OFFICIAL SVG FILES
Copy the source, keep the boundary, and adapt the system.
The package includes readable TypeScript, one stylesheet, semantic server-render tests, a production demo build, source notes, quick-start checklist, and commercial licence.
AiMediaDisclosureFour overlay positions for first-exposure image, audio, or video surfaces.
AiDisclosureDetailsNative keyboard-accessible second layer for purpose, review, limits, and contact.
AiInteractionNoticePlain-language notice for direct interaction with an AI system.
AiPublicationNoticeVisible companion pattern for AI-assisted or generated publications.
OFFICIAL-SOURCE BOUNDARY
Free icon rights do not equal a compliance certificate.
The Commission says the icons are freely usable without attribution, but use is optional, the applicable labelling duties are not, and the icon does not establish compliance by itself.
Read the official EU icon guidance ↗Official assets12 SVG variants
Source kit5 React components
VerificationTests + typecheck + build
No legal advice, Code-signatory claim, accessibility certification, or machine-readable marking.FAQ
Know the implementation boundary.
Are the EU icon files included?
Yes. The source ZIP includes all 12 black, white, solid, and 50%-transparency SVG variants downloaded from the official Commission package.
Can I use the icons without attribution?
The official page says everyone may use them freely without attribution. Its separate conditions still apply, and use must not imply Code-signatory status.
Does the kit implement machine-readable marking?
No. It implements visible React UI patterns only. Provider-side marking and detection require a separate technical assessment.
What can I deploy with the licence?
One purchaser or organisation may modify the source and use it on up to five production domains or applications, including paid client work.
LAUNCH EDITION
Move from official SVG files to a tested React pattern.
Source, all assets, responsive CSS, tests, demo build, quick start, source note, and commercial licence.