football-badges

A curated collection of football club badges in SVG with CSS classes for easy integration. Currently covers Copa Libertadores 2026 participants.

Install

npm install football-badges

Or via CDN:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/css/football-badges.min.css"
/>

Usage

HTML

<span class="fb fb-br-flamengo"></span>
<span class="fb fb-ar-boca-juniors"></span>
<span class="fb fb-uy-penarol"></span>

CSS Import

import "football-badges/css/football-badges.min.css";

SCSS (with tree-shaking)

Include only the clubs you need:

@use "football-badges/sass/football-badges" with (
  $football-badges-included-clubs: (
    ("br", "flamengo"),
    ("br", "palmeiras"),
    ("ar", "boca-juniors"),
  )
);

Programmatic

import clubs from "football-badges/clubs.json";
// clubs is an array of { name, slug, countryCode, country, badge, competitions }

CSS Classes

| Class | Description | | :--------------------- | :-------------------------------------------- | | .fb | Base badge class (1em square, inline-block) | | .fb-{country}-{slug} | Specific club badge (e.g., .fb-br-flamengo) | | .fbr | Rectangular variant (wider container) | | .fbb | Background-only variant (no layout) |

Sizing

Badges scale with font-size:

<span class="fb fb-br-flamengo" style="font-size: 2rem"></span>
<span class="fb fb-br-flamengo" style="font-size: 4rem"></span>

Available Clubs

28 clubs across 10 CONMEBOL countries:

Argentina (6): Boca Juniors, Estudiantes, Independiente Rivadavia, Lanus, Platense, Rosario Central Bolivia (2): Always Ready, Bolivar Brazil (6): Corinthians, Cruzeiro, Flamengo, Fluminense, Mirassol, Palmeiras Chile (2): Coquimbo Unido, Universidad Catolica Colombia (2): Atletico Junior, Independiente Santa Fe Ecuador (2): Independiente del Valle, Liga de Quito Paraguay (2): Cerro Porteno, Libertad Peru (2): Cusco, Universitario Uruguay (2): Nacional, Penarol Venezuela (2): Deportivo La Guaira, Universidad Central

Development

git clone https://github.com/LJ-World-Cup-Predictions/football-badges.git
cd football-badges
npm install
npm run build       # Compile SCSS to CSS
npm start           # Serve demo at http://localhost:8000

Scripts

| Command | Description | | :---------------------- | :------------------------------------------------ | | npm run build | Compile SCSS to CSS (standard + minified) | | npm run svgo | Optimize all SVGs | | npm run generate:scss | Regenerate SCSS club list from clubs.json | | npm run sync | Validate badges, clubs.json, and SCSS are in sync | | npm run download | Fetch SVGs from football-logos.cc | | npm start | Serve demo page locally |

License

MIT