football-logos

Appearance

Usage ​

FootballLogo renders one crest. country is the football-logos.cc country slug. club is the second slug — a club or a league.

See Catalog freshness for how to keep the catalog up to date.

The site path is the same pair of slugs the component needs. Copy them off any logo page:

https://football-logos.cc/germany/bayern-munchen/
                         └─country─┘ └────club─────┘
tsx
<FootballLogo country="germany" club="bayern-munchen" size={48} />

Club ​

tsx
import { FootballLogo } from "football-logos/react";

<FootballLogo country="germany" club="bayern-munchen" size={48} />

Cache the image URL long-term. Filenames are content-hashed, so a stored src stays valid when the catalog is updated later.

Leagues & Competitions ​

Pass the competition slug as club. Omit club to get that country's top-flight badge. International competitions use country="tournaments". National teams use club="{country}-national-team"; on countries that only have that crest, omitting club is enough.

tsx
<FootballLogo country="england" club="english-premier-league" size={32} />

Tournaments such as the Champions League live under country="tournaments":

https://football-logos.cc/tournaments/uefa-champions-league/
                         └──country──┘ └────────club────────┘
tsx
<FootballLogo country="tournaments" club="uefa-champions-league" size={32} />

Cache the image URL long-term here too. Keeping a hashed src avoids broken crests if the package catalog moves on.

Browse the full Leagues & Competitions and Clubs catalogs. Other helpers are listed under Other functions.

Without a wrapper ​

Use getFootballLogoUrl() from the core package when you are not using React, Vue, Svelte, or Astro. It returns the public PNG URL; put that on an img. See getFootballLogoUrl.

ts
import { getFootballLogoUrl } from "football-logos";

const src = getFootballLogoUrl({
  country: "germany",
  club: "bayern-munchen",
});
jsx
<img src={src} width={48} height={48} alt="Bayern München" />

League badges use the same club attribute:

ts
getFootballLogoUrl({ country: "england", club: "english-premier-league" });
getFootballLogoUrl({ country: "tournaments", club: "uefa-champions-league" });
getFootballLogoUrl({ country: "germany" });

Catalog freshness ​

The shipped catalog is a snapshot. FootballLogo does not refresh it. Call startCatalogRefresh() once in a long-lived Node process, not in the browser.

See that page for how to implement it in React, Vue, Svelte, and Astro.

Caching ​

The src is a content-hashed PNG, so browsers can reuse it across page loads. FootballLogo sets width, height, decoding="async", and loading="lazy" by default.

Color variants (black / white) can come later as a variant prop, next to CSS style.