Flag Icon CSS — Free Country Flag Icons CSS Classes

Quick Start

Add the stylesheet to your HTML, then use CSS classes:

1. Include the CSS

<link rel="stylesheet" href="https://cdn.freeflags.org/css/freeflags.min.css">

2. Use flag classes

<i class="ff ff-th"></i>           <!-- Thailand (default: flat-circle) -->
<i class="ff ff-us ff-heart"></i>  <!-- USA heart style -->
<i class="ff ff-jp ff-shield"></i> <!-- Japan shield style -->
<i class="ff ff-gb ff-lg"></i>     <!-- UK large size -->

Live Preview

Try different countries, styles, and sizes:

Country

Style

Size

<i class="ff ff-th"></i>

CSS Class Reference

Country Codes

Use the ISO 2-letter code as .ff-{code}:

.ff-afAfghanistan

.ff-alAlbania

.ff-dzAlgeria

.ff-adAndorra

.ff-aoAngola

.ff-agAntigua And Barbuda

.ff-arArgentina

.ff-amArmenia

.ff-auAustralia

.ff-atAustria

.ff-azAzerbaijan

.ff-bsBahamas

.ff-bhBahrain

.ff-bdBangladesh

.ff-bbBarbados

.ff-byBelarus

.ff-beBelgium

.ff-bzBelize

.ff-bjBenin

.ff-btBhutan

.ff-boBolivia

.ff-baBosnia And Herzegovina

.ff-bwBotswana

.ff-brBrazil

.ff-bnBrunei

.ff-bgBulgaria

.ff-bfBurkina Faso

.ff-biBurundi

.ff-khCambodia

.ff-cmCameroon

.ff-caCanada

.ff-cvCape Verde

.ff-cfCentral African Republic

.ff-tdChad

.ff-clChile

.ff-cnChina

.ff-coColombia

.ff-kmComoros

.ff-crCosta Rica

.ff-hrCroatia

.ff-cuCuba

.ff-cyCyprus

.ff-czCzechia

.ff-dkDenmark

.ff-djDjibouti

.ff-dmDominica

.ff-doDominican Republic

.ff-cdDr Congo

.ff-ecEcuador

.ff-egEgypt

.ff-svEl Salvador

.ff-gqEquatorial Guinea

.ff-erEritrea

.ff-eeEstonia

.ff-szEswatini

.ff-etEthiopia

.ff-fjFiji

.ff-fiFinland

.ff-frFrance

.ff-gaGabon

.ff-gmGambia

.ff-geGeorgia

.ff-deGermany

.ff-ghGhana

.ff-grGreece

.ff-gdGrenada

.ff-gtGuatemala

.ff-gnGuinea

.ff-gwGuinea Bissau

.ff-gyGuyana

.ff-htHaiti

.ff-hnHonduras

.ff-huHungary

.ff-isIceland

.ff-inIndia

.ff-idIndonesia

.ff-irIran

.ff-iqIraq

.ff-ieIreland

.ff-ilIsrael

.ff-itItaly

.ff-ciIvory Coast

.ff-jmJamaica

.ff-jpJapan

.ff-joJordan

.ff-kzKazakhstan

.ff-keKenya

.ff-kiKiribati

.ff-xkKosovo

.ff-kwKuwait

.ff-kgKyrgyzstan

.ff-laLaos

.ff-lvLatvia

.ff-lbLebanon

.ff-lsLesotho

.ff-lrLiberia

.ff-lyLibya

.ff-liLiechtenstein

.ff-ltLithuania

.ff-luLuxembourg

.ff-mgMadagascar

.ff-mwMalawi

.ff-myMalaysia

.ff-mvMaldives

.ff-mlMali

.ff-mtMalta

.ff-mhMarshall Islands

.ff-mrMauritania

.ff-muMauritius

.ff-mxMexico

.ff-fmMicronesia

.ff-mdMoldova

.ff-mcMonaco

.ff-mnMongolia

.ff-meMontenegro

.ff-maMorocco

.ff-mzMozambique

.ff-mmMyanmar

.ff-naNamibia

.ff-nrNauru

.ff-npNepal

.ff-nlNetherlands

.ff-nzNew Zealand

.ff-niNicaragua

.ff-neNiger

.ff-ngNigeria

.ff-kpNorth Korea

.ff-mkNorth Macedonia

.ff-noNorway

.ff-omOman

.ff-pkPakistan

.ff-pwPalau

.ff-paPanama

.ff-pgPapua New Guinea

.ff-pyParaguay

.ff-pePeru

.ff-phPhilippines

.ff-plPoland

.ff-ptPortugal

.ff-qaQatar

.ff-cgRepublic Of The Congo

.ff-roRomania

.ff-ruRussia

.ff-rwRwanda

.ff-knSaint Kitts And Nevis

.ff-lcSaint Lucia

.ff-vcSaint Vincent And The Grenadines

.ff-wsSamoa

.ff-smSan Marino

.ff-stSão Tomé and Príncipe

.ff-saSaudi Arabia

.ff-snSenegal

.ff-rsSerbia

.ff-scSeychelles

.ff-slSierra Leone

.ff-sgSingapore

.ff-skSlovakia

.ff-siSlovenia

.ff-sbSolomon Islands

.ff-soSomalia

.ff-zaSouth Africa

.ff-krSouth Korea

.ff-ssSouth Sudan

.ff-esSpain

.ff-lkSri Lanka

.ff-sdSudan

.ff-srSuriname

.ff-seSweden

.ff-chSwitzerland

.ff-sySyria

.ff-tjTajikistan

.ff-tzTanzania

.ff-thThailand

.ff-tlTimor Leste

.ff-tgTogo

.ff-toTonga

.ff-ttTrinidad And Tobago

.ff-tnTunisia

.ff-trTurkey

.ff-tmTurkmenistan

.ff-tvTuvalu

.ff-ugUganda

.ff-uaUkraine

.ff-aeUnited Arab Emirates

.ff-gbUnited Kingdom

.ff-usUnited States

.ff-uyUruguay

.ff-uzUzbekistan

.ff-vuVanuatu

.ff-vaVatican City

.ff-veVenezuela

.ff-vnVietnam

.ff-yeYemen

.ff-zmZambia

.ff-zwZimbabwe

Style Modifiers

Add a style class to change the icon shape:

.ff-heartHeart

.ff-circle-badgeCircle Badge

.ff-shieldShield

.ff-dropTeardrop Pin

.ff-bubble-markerBubble Marker

.ff-color-pinColor Pin

.ff-badgeBadge Seal

.ff-rounded-badgeRounded Badge

.ff-square-pinSquare Pin

.ff-leaf-badgeLeaf Badge

.ff-flat-circleFlat Circle

.ff-flat-rectangleFlat Rectangle

.ff-flat-squareFlat Square

.ff-flat-heartFlat Heart

.ff-heart-badgeHeart Badge

.ff-flat-shieldFlat Shield

.ff-square-badgeSquare Badge

.ff-square-shadowSquare Shadow

.ff-stamp-rectangleStamp Rectangle

.ff-stamp-squareStamp Square

Size Classes

.ff-sm16px

.ff-md24px

.ff-lg32px

.ff-xl48px

.ff-2x64px

.ff-3x96px

Use with Frameworks

React / JSX

// In your component
<i className="ff ff-th ff-lg" />

// Or dynamic
<i className={`ff ff-${countryCode} ff-heart`} />

Vue

<i :class="['ff', `ff-${country}`, 'ff-circle-badge']"></i>

Angular

<i [class]="'ff ff-' + countryCode + ' ff-shield'"></i>

Compared to flag-icon-css

freeflags.cssflag-icon-css

CDN only (no npm)YesYes

Multiple styles13 styles1 style

PNG + SVGYesSVG only

Size classes6 sizes2 sizes

Free foreverYesYes