K. Polash

Posted on Mar 6

blade-flags gives you SVG rectangles. This gives you flags users actually recognize.

#laravel #php #opensource #webdev

There's already a popular Laravel flag package. outhebox/blade-flags has 663k installs, and it works fine.

So why did I build another one?

Because SVG rectangular flags and emoji flags solve different problems — and most Laravel apps actually need the emoji version.

The difference nobody talks about

When your user sees this in your app:

<x-flag-icon type="country" code="bd" width="24px" />

They see: 🇧🇩

That's the flag they see in WhatsApp. In Twitter. In their phone keyboard. In every modern app, they use it daily. Their brain recognizes it in zero milliseconds.

blade-flags renders a tiny rectangular SVG of the Bangladeshi flag — accurate, technically correct, and completely unfamiliar to most users. It looks like something from a government website.

Emoji flags match the visual language of the modern web. SVG flags don't.

When does this actually matter?

If you're building a developer tool or admin dashboard — use blade-flags. SVG flags look sharp and professional at small sizes in dense UIs.

If you're building anything user-facing — locale switchers, user profiles, country selectors, chat apps, language pickers — use Twemoji flags. Users recognize them instantly. That recognition reduces friction.

The mental model test: your user doesn't think "ISO 3166-1 alpha-2 code for Bangladesh." They think 🇧🇩. Build for that.

Installation

composer require pola5h/laravel-flags

Auto-registered on Laravel 5.5+. No config publishing, no setup. Done.

Usage

{{-- Country flag --}}
<x-flag-icon type="country" code="us" width="24px" height="24px" />

{{-- Language flag --}}
<x-flag-icon type="language" code="bn" width="24px" height="24px" />

Two parameters that matter: type (country or language) and code (ISO 2-letter code). Width and height are optional — they default to auto.

Country flags

Any ISO 3166-1 alpha-2 code works:

<x-flag-icon type="country" code="us" width="20px" /> 🇺🇸 United States
<x-flag-icon type="country" code="gb" width="20px" /> 🇬🇧 United Kingdom
<x-flag-icon type="country" code="bd" width="20px" /> 🇧🇩 Bangladesh
<x-flag-icon type="country" code="de" width="20px" /> 🇩🇪 Germany
<x-flag-icon type="country" code="jp" width="20px" /> 🇯🇵 Japan

Dynamic usage from a model:

<x-flag-icon type="country" code="{{ $user->country_code }}" width="20px" />

250+ countries supported.

Language flags

Language flags map to the country most associated with that language. Bengali → Bangladesh, Arabic → Saudi Arabia, French → France.

<x-flag-icon type="language" code="en" width="20px" /> English
<x-flag-icon type="language" code="bn" width="20px" /> Bengali
<x-flag-icon type="language" code="ar" width="20px" /> Arabic
<x-flag-icon type="language" code="zh" width="20px" /> Chinese
<x-flag-icon type="language" code="fr" width="20px" /> French

Dynamic with the current app locale:

<x-flag-icon type="language" code="{{ app()->getLocale() }}" width="20px" />

100+ languages supported.

The use case I built this for: locale switchers

This is where the difference is most visible. A locale switcher with SVG flags feels like a dropdown from 2012. With Twemoji flags it feels native — like switching language on your iPhone.

@foreach ($availableLocales as $locale)
    <a href="{{ route('locale.switch', $locale) }}"
       class="{{ app()->getLocale() === $locale ? 'active' : '' }}">
        <x-flag-icon
            type="language"
            code="{{ $locale }}"
            width="18px"
            height="18px"
        />
        {{ strtoupper($locale) }}
    </a>
@endforeach

Clean, familiar, instant recognition.

Side-by-side comparison

	`pola5h/laravel-flags`	`outhebox/blade-flags`
Flag style	Twemoji emoji 🇧🇩	SVG rectangular
Best for	User-facing UI	Admin/dev tools
Countries	250+	300+
Language flags	✅ Yes	❌ No
Zero config	✅ Yes	✅ Yes
License	MIT	MIT
Installs	New	663k

The one thing blade-flags doesn't have at all: language flags. If you need to show a flag for Bengali, Arabic, or French — not the country, but the language — this package is currently your only option in the Laravel ecosystem.

DEV Community