---
title: "Badge AI — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Nostromo Studio · Sections. Badge AI is a small, branded credit badge for showing which AI tool helped design, code, or write your site — using real official logos,…"
canonical: "https://framer.elliotli.dev/component/badge-ai"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Badge AI

# Badge AI

Credit the AI behind your Site

[View on Framer](https://framer.com/marketplace/components/badge-ai/?via=elliot-li)

![Badge AI preview image 1](https://framer.elliotli.dev/og/component/badge-ai/ddec6b8b7aa00fa1/1600x1200.jpg)

## Summary

Badge AI is a small, branded credit badge for showing which AI tool helped design, code, or write your site — using real official logos, not generic icons.

## Description

**Badge AI** is a small, branded credit badge for showing which AI tool helped design, code, or write your site — using real official logos, not generic icons.

Pick a provider from **13 popular AI tools**, choose how much to show — icon only, icon with name, or the full logo — and the badge adapts automatically to the brand's real colors and proportions, or a clean monochrome mode of your choosing.

Every part of the badge is fully customizable — colors, border, corner radius, size, padding, spacing, and typography — so it always matches your site's design.

## **Key Features**

### Providers & Style

13 AI providers with official logos and wordmarks (Claude, ChatGPT, Gemini, Grok, DeepSeek, Mistral AI, Perplexity, Codex, Midjourney, GitHub Copilot, Cursor, Meta AI, Copilot)

-   Three display styles: Icon, Icon + Name, Logo
    
-   Monochrome mode with its own independent color
    
-   Editable message per provider, or write your own
    
-   _Colors & Typography_ Built-in dark and light themes
    
-   Fully custom colors for every state, including hover
    
-   Full font controls for message and name text
    

### Link & Layout

-   Optional link, with hover states that only activate when linked
    
-   Adjustable padding, spacing, corner radius, and shadow
    
-   Auto-sizing badge that fits any layout
    

### Usage Notes

Badge AI works at any width and sits naturally in a footer, hero, or about page. Colors follow the selected theme unless overridden, so it stays consistent if you switch themes later.

## **How to Set Up**

1.  Drag Badge AI onto your canvas
    
2.  Pick an AI provider and a display style
    
3.  Adjust colors, typography, and spacing
    
4.  Publish
    

## **Refund Policy**

All sales of digital products are final and non-refundable.

Questions? Contact [hellonostromostudio@gmail.com](mailto:hellonostromostudio@gmail.com) before purchasing.

Enjoy!

## Rank history [How rankings work →](/terms#rankings)

-   All · #4219

## Details

- **Author**: Nostromo Studio
- **Price**: $6.00
- **Published**: 2026-07-11
- **Updated**: 2026-08-08
- **Added**: 2026-07-11
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes