Built with Claude

Embeddable disclosure badges — copy the HTML snippet or reference the SVG file. No CDN dependency.

Badge Variants

Built with Claude

Light

Default. Works on white and light-gray backgrounds.

HTML snippet 
<span style="display:inline-flex;align-items:center;gap:0.55em;padding:0.42em 0.95em;
  font-size:0.85em;font-weight:500;color:#212529;background:#f8f9fa;
  border:1px solid #dee2e6;border-radius:999px;line-height:1;white-space:nowrap;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif">
  <!-- Option A: CDN (web pages only) -->
  <img src="https://cdn.jsdelivr.net/npm/remixicon@4.9.1/icons/Logos/claude-line.svg"
       width="18" height="18" alt="" aria-hidden="true" style="flex-shrink:0;">
  <!-- Option B: inline SVG path from remixicon/icons/Logos/claude-line.svg -->
  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M8.64445 2.55279C8.39746 2.05881 7.79679 1.85859 7.30281 2.10558 ..."/>
  </svg>
  Built with Claude
</span>
Built with Claude

Dark

For dark-mode interfaces or dark-background footers.

HTML snippet 
<span style="display:inline-flex;align-items:center;gap:0.55em;padding:0.42em 0.95em;
  font-size:0.85em;font-weight:500;color:#f0f0ff;background:#1e1e2e;
  border:1px solid #3d3d5c;border-radius:999px;line-height:1;white-space:nowrap;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif">
  <!-- same SVG icon with fill="currentColor" -->
  Built with Claude
</span>
Built with Claude

Brand (Orange)

Claude's warm coral accent. High contrast, prominent disclosure.

HTML snippet 
<span style="display:inline-flex;align-items:center;gap:0.55em;padding:0.42em 0.95em;
  font-size:0.85em;font-weight:500;color:#fff;background:#cf7a5b;
  border:1px solid transparent;border-radius:999px;line-height:1;white-space:nowrap;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif">
  <!-- same SVG icon with fill="currentColor" -->
  Built with Claude
</span>
Built with Claude

Outline

Transparent background — works over images or colored sections.

HTML snippet 
<span style="display:inline-flex;align-items:center;gap:0.55em;padding:0.42em 0.95em;
  font-size:0.85em;font-weight:500;color:#1e1e2e;background:#fff;
  border:1.5px solid #cf7a5b;border-radius:999px;line-height:1;white-space:nowrap;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif">
  <!-- SVG icon with fill="#cf7a5b" -->
  Built with Claude
</span>

Sizes

Built with Claude Built with Claude Built with Claude

Compact · Default · Large

Adjust font-size to scale the badge; icon width/height should match proportionally.

SVG File Reference

Built with Claude Built with Claude (dark) Built with Claude (orange) Built with Claude (outline) Built with Claude (compact)

All five SVG files

Reference directly as an <img> tag. Fully self-contained — no external resources.

HTML snippet 
<img
  src="badge-built-with-claude.svg"
  alt="Built with Claude"
  title="This project was built with Claude, Anthropic's AI assistant."
  height="32"
  style="vertical-align:middle;"
/>

In Context

Mau Vera
Product Designer & Builder
mau@example.com
Built with Claude · AI tools used in drafting this message

Email signature example

Use the compact badge in email footers to disclose AI assistance.

This article explores how AI is transforming the way we document software systems — from auto-generated changelogs to intelligent specification writers.

March 2026 · 5 min read · Built with Claude

Blog post byline

Inline disclosure in article metadata — compact badge sits naturally alongside date and reading time.