PHPackages                             outhebox/blade-flags - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. outhebox/blade-flags

ActiveLibrary[Templating & Views](/categories/templating)

outhebox/blade-flags
====================

A package to easily make use of country & language flags in your Laravel Blade views.

1.7.0(2mo ago)303723.7k↓14%315MITTypeScriptPHP ^7.4|^8.0|^8.1|^8.2CI passing

Since Sep 21Pushed 2mo ago2 watchersCompare

[ Source](https://github.com/MohmmedAshraf/blade-flags)[ Packagist](https://packagist.org/packages/outhebox/blade-flags)[ Docs](https://github.com/MohmmedAshraf/blade-flags)[ GitHub Sponsors](https://github.com/MohmmedAshraf)[ RSS](/packages/outhebox-blade-flags/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (8)Versions (20)Used By (5)

 [![Blade Flags — SVG country and language flags for Laravel, Vue, React, and JavaScript](art/cover.png)](art/cover.png)

 [Laravel](#laravel--blade) | [Vue](#vue) | [React](#react) | [Vanilla JS](#vanilla-js) | [Variants](#flag-variants) | [Contributing](#contributing)

[![Latest Stable Version](https://camo.githubusercontent.com/2add8106326173d6bf292a887a963ca5f460c54f369d5c39088f5a9dfcf1573e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6f75746865626f782f626c6164652d666c616773)](https://packagist.org/packages/outhebox/blade-flags)[![npm version](https://camo.githubusercontent.com/4ed2dea873e254eb3741b59d04fc878f9ef37c759735c4dbf53da8a4bf8dd58a/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f40626c6164652d666c6167732f636f7265)](https://www.npmjs.com/package/@blade-flags/core)[![Total Downloads](https://camo.githubusercontent.com/e30006c0a8a97d62b4bfa6601342a1aa99f407819d06336d2479d6b3c0abdd8b/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6f75746865626f782f626c6164652d666c616773)](https://packagist.org/packages/outhebox/blade-flags)[![PHP from Packagist](https://camo.githubusercontent.com/63c492933808690b0592011b47a88debb2bc3dcd58b00015b71c9480fac6d3ca/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f7068702d762f6f75746865626f782f626c6164652d666c6167732e737667)](https://packagist.org/packages/outhebox/blade-flags)[![Laravel Version](https://camo.githubusercontent.com/7144169ee77ba37bda9407b35b778c4ebd8a827a164cdd2e4037909ea605a50c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d392e782532307c25323031302e782532307c25323031312e782532307c25323031322e782d627269676874677265656e2e737667)](https://packagist.org/packages/outhebox/blade-flags)

Introduction
------------

[](#introduction)

1,759 SVG country and language flags for Laravel Blade, Vue, React, and vanilla JavaScript. Three flag styles, 128 language mappings, and full support for regional variants like `ar-sa`, `en-us`, and `fr-ca`. Works great with Inertia.js.

Use them anywhere — locale switchers, address forms, dashboards, or admin panels.

VariantBladeJS importCountriesLanguagesSourceDefault (rounded)```defaultFlags`264281[TwEmoji](https://github.com/twitter/twemoji)Circle```circleFlags`405275[circle-flags](https://github.com/HatScripts/circle-flags)Flat (4:3)```flatFlags`270264[flag-icons](https://github.com/lipis/flag-icons)For a full list of available icons see the SVG directories: [default](resources/svg), [circle](resources/svg-circle), [flat](resources/svg-flat).

Installation
------------

[](#installation)

```
# Laravel / PHP
composer require outhebox/blade-flags

# Vue
npm install @blade-flags/core @blade-flags/vue

# React
npm install @blade-flags/core @blade-flags/react

# Vanilla JS / Node
npm install @blade-flags/core
```

Laravel / Blade
---------------

[](#laravel--blade)

> Requires PHP 8.0+ and Laravel 9+. Uses [Blade Icons](https://github.com/blade-ui-kit/blade-icons) under the hood — see their readme for caching and additional features.
>
> **[Watch a 3-minute video by Povilas Korop](https://www.youtube.com/watch?v=XTnKU-VCOB8)** showcasing the package.

Icons can be used as self-closing Blade components which will be compiled to SVG icons.

#### Default (Rounded Rectangle)

[](#default-rounded-rectangle)

```

```

...produces this:

[![US flag (default variant)](resources/svg/country-us.svg)](resources/svg/country-us.svg)[![GB flag (default variant)](resources/svg/country-gb.svg)](resources/svg/country-gb.svg)[![BR flag (default variant)](resources/svg/country-br.svg)](resources/svg/country-br.svg)[![CN flag (default variant)](resources/svg/country-cn.svg)](resources/svg/country-cn.svg)[![RU flag (default variant)](resources/svg/country-ru.svg)](resources/svg/country-ru.svg)

```

```

...produces this:

[![English language flag](resources/svg/language-en.svg)](resources/svg/language-en.svg)[![Arabic language flag](resources/svg/language-ar.svg)](resources/svg/language-ar.svg)[![Spanish language flag](resources/svg/language-es.svg)](resources/svg/language-es.svg)

#### Circle

[](#circle)

```

```

...produces this:

[![US flag (circle variant)](resources/svg-circle/circle-country-us.svg)](resources/svg-circle/circle-country-us.svg)[![GB flag (circle variant)](resources/svg-circle/circle-country-gb.svg)](resources/svg-circle/circle-country-gb.svg)[![BR flag (circle variant)](resources/svg-circle/circle-country-br.svg)](resources/svg-circle/circle-country-br.svg)[![CN flag (circle variant)](resources/svg-circle/circle-country-cn.svg)](resources/svg-circle/circle-country-cn.svg)[![RU flag (circle variant)](resources/svg-circle/circle-country-ru.svg)](resources/svg-circle/circle-country-ru.svg)

```

```

...produces this:

[![English language flag (circle)](resources/svg-circle/circle-language-en.svg)](resources/svg-circle/circle-language-en.svg)[![Arabic language flag (circle)](resources/svg-circle/circle-language-ar.svg)](resources/svg-circle/circle-language-ar.svg)[![Arabic (Saudi Arabia) language flag (circle)](resources/svg-circle/circle-language-ar-sa.svg)](resources/svg-circle/circle-language-ar-sa.svg)[![Arabic (Egypt) language flag (circle)](resources/svg-circle/circle-language-ar-eg.svg)](resources/svg-circle/circle-language-ar-eg.svg)

#### Flat (4:3 Rectangle)

[](#flat-43-rectangle)

```

```

...produces this:

[![US flag (flat variant)](resources/svg-flat/flat-country-us.svg)](resources/svg-flat/flat-country-us.svg)[![GB flag (flat variant)](resources/svg-flat/flat-country-gb.svg)](resources/svg-flat/flat-country-gb.svg)[![BR flag (flat variant)](resources/svg-flat/flat-country-br.svg)](resources/svg-flat/flat-country-br.svg)[![CN flag (flat variant)](resources/svg-flat/flat-country-cn.svg)](resources/svg-flat/flat-country-cn.svg)[![RU flag (flat variant)](resources/svg-flat/flat-country-ru.svg)](resources/svg-flat/flat-country-ru.svg)

```

```

...produces this:

[![English language flag (flat)](resources/svg-flat/flat-language-en.svg)](resources/svg-flat/flat-language-en.svg)[![Arabic language flag (flat)](resources/svg-flat/flat-language-ar.svg)](resources/svg-flat/flat-language-ar.svg)[![French language flag (flat)](resources/svg-flat/flat-language-fr.svg)](resources/svg-flat/flat-language-fr.svg)

#### Classes & Attributes

[](#classes--attributes)

You can pass classes to any variant:

```

```

### Dynamic Icons

[](#dynamic-icons)

For dynamic icon names (e.g. from a database or variable), use the `@svg` Blade directive:

```
@svg('flag-country-'.$country->iso2_code)
@svg('flag-circle-country-'.$country->iso2_code, 'w-6 h-6')
@svg('flag-flat-country-'.$country->iso2_code)

@svg('flag-language-'.$language->code)
@svg('flag-circle-language-'.$language->code, 'w-6 h-6')
@svg('flag-flat-language-'.$language->code)
```

Or the `svg()` helper in PHP:

```
svg('flag-country-us')->toHtml()
svg('flag-circle-country-us', 'w-6 h-6')->toHtml()
```

### Raw SVG Icons

[](#raw-svg-icons)

Publish the raw SVG files as public assets:

```
php artisan vendor:publish --tag=blade-flags --force
php artisan vendor:publish --tag=blade-flags-circle --force
php artisan vendor:publish --tag=blade-flags-flat --force
```

Then use them in your views:

```

```

### Configuration

[](#configuration)

Blade Flags also offers the ability to use features from Blade Icons like default classes, default attributes, etc. If you'd like to configure these, publish the `blade-flags.php` config file:

```
php artisan vendor:publish --tag=blade-flags-config
```

### Language Flag Overrides

[](#language-flag-overrides)

By default, language flags use the country mappings defined in [`config/language-countries.json`](config/language-countries.json) (e.g. `ar` → UAE, `en` → UK). You can override these defaults per-language:

1. Publish the config file:

    ```
    php artisan vendor:publish --tag=blade-flags-config
    ```
2. Edit `config/blade-flags.php` to set your preferred mappings:

    ```
    'language_overrides' => [
        'ar' => ['default' => 'sa'],  // Arabic → Saudi Arabia
        'en' => ['default' => 'us'],  // English → United States
    ],
    ```
3. Publish the SVG assets and apply your overrides:

    ```
    php artisan vendor:publish --tag=blade-flags --force
    php artisan vendor:publish --tag=blade-flags-circle --force
    php artisan vendor:publish --tag=blade-flags-flat --force
    php artisan blade-flags:generate
    ```

The `blade-flags:generate` command reads the package defaults, merges your overrides, and regenerates the language flag SVGs in the published vendor directories.

Vue
---

[](#vue)

Works with Vue 3.3+. Ideal for Inertia.js apps.

```

import { Flag } from '@blade-flags/vue'
import { circleFlags } from '@blade-flags/core/flags/circle'

```

React
-----

[](#react)

Works with React 18+.

```
import { Flag } from '@blade-flags/react'
import { circleFlags } from '@blade-flags/core/flags/circle'

// Dynamic: pass the full map, resolve by code at runtime

```

Vanilla JS
----------

[](#vanilla-js)

Use `@blade-flags/core` directly in any JavaScript or TypeScript project:

```
import { resolveFlag } from '@blade-flags/core'
import { circleFlags } from '@blade-flags/core/flags/circle'

// Dynamic: resolve by code at runtime (loads all flags in the variant)
const svg = resolveFlag(circleFlags, user.country)
document.getElementById('flag').innerHTML = svg
```

Tree-Shaking & Bundle Size
------------------------------

[](#tree-shaking--bundle-size)

Every flag is a **named export**. If you know which flags you need at build time, import them directly — your bundler will tree-shake the rest:

```
// Only the flags you import end up in your bundle
import { countryUs, countryGb, languageAr, languageArSa } from '@blade-flags/core/flags/circle'
```

Flag names follow the pattern `country{Code}` and `language{Code}` in camelCase:

SVG keyNamed exportType`country-us``countryUs`Country`country-gb-eng``countryGbEng`Country (region)`language-ar``languageAr`Language`language-ar-sa``languageArSa`Language (regional)For **dynamic** use (code comes from a database or API), import the full variant map. The `Flag` component uses this approach:

```
// Loads all flags in the variant — use when the code isn't known at build time
import { circleFlags } from '@blade-flags/core/flags/circle'
import { resolveFlag } from '@blade-flags/core'

const countrySvg = resolveFlag(circleFlags, 'us')              // country flag
const languageSvg = resolveFlag(circleFlags, 'ar-sa', 'language') // language flag
```

Import styleWhen to useBundle impact`import { countryUs } from '.../circle'`You know the flags at build timeOnly the flags you import`import { circleFlags } from '.../circle'`Code is dynamic (from data/API)All flags in the variantFlag Variants
-------------

[](#flag-variants)

Import only the variant you need:

```
import { defaultFlags } from '@blade-flags/core/flags/default'  // 264 country + 281 language
import { circleFlags } from '@blade-flags/core/flags/circle'    // 405 country + 275 language
import { flatFlags } from '@blade-flags/core/flags/flat'        // 270 country + 264 language
```

PackageDescription`@blade-flags/core`SVG strings as JS modules + `resolveFlag()` helper`@blade-flags/vue``` component for Vue 3 (peer dep: `vue ^3.3`)`@blade-flags/react``` component for React 18+ (peer dep: `react ^18 | ^19`)The `AutoFlag` convenience component accepts a `variant` string prop but bundles all variants:

```

import { AutoFlag } from '@blade-flags/vue'

```

Disclaimer
----------

[](#disclaimer)

This package aims for broad compatibility by mirroring upstream flag collections. Inclusion of any flag does not imply endorsement. The author of this package stands with Palestine (the Palestine flag is featured in the project cover). If you want to exclude specific flags, you can do so in your application/UI, or exclude them during the build via [`bin/build.sh`](bin/build.sh).

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.

License
-------

[](#license)

Blade Flags is open-sourced software licensed under [the MIT license](LICENSE.md).

###  Health Score

63

—

FairBetter than 99% of packages

Maintenance85

Actively maintained with recent releases

Popularity58

Moderate usage in the ecosystem

Community28

Small or concentrated contributor base

Maturity68

Established project with proven stability

 Bus Factor1

Top contributor holds 82.4% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~74 days

Recently: every ~92 days

Total

18

Last Release

78d ago

PHP version history (2 changes)1.0.0PHP ^8.0

1.2.0PHP ^7.4|^8.0|^8.1|^8.2

### Community

Maintainers

![](https://www.gravatar.com/avatar/1fafcf25aad612ce33476889bc889bafe60e215d045c23778007218e475c8e47?d=identicon)[MohammedAshraf](/maintainers/MohammedAshraf)

---

Top Contributors

[![MohmmedAshraf](https://avatars.githubusercontent.com/u/44909285?v=4)](https://github.com/MohmmedAshraf "MohmmedAshraf (56 commits)")[![laravel-shift](https://avatars.githubusercontent.com/u/15991828?v=4)](https://github.com/laravel-shift "laravel-shift (4 commits)")[![renwarkurd](https://avatars.githubusercontent.com/u/42937864?v=4)](https://github.com/renwarkurd "renwarkurd (2 commits)")[![JamelSyr](https://avatars.githubusercontent.com/u/47623448?v=4)](https://github.com/JamelSyr "JamelSyr (1 commits)")[![michaeljmeadows](https://avatars.githubusercontent.com/u/82371405?v=4)](https://github.com/michaeljmeadows "michaeljmeadows (1 commits)")[![adriallongarriu](https://avatars.githubusercontent.com/u/20278289?v=4)](https://github.com/adriallongarriu "adriallongarriu (1 commits)")[![shailesh-ladumor](https://avatars.githubusercontent.com/u/16555999?v=4)](https://github.com/shailesh-ladumor "shailesh-ladumor (1 commits)")[![altomar](https://avatars.githubusercontent.com/u/28709847?v=4)](https://github.com/altomar "altomar (1 commits)")[![hackedhorizon](https://avatars.githubusercontent.com/u/151632574?v=4)](https://github.com/hackedhorizon "hackedhorizon (1 commits)")

---

Tags

bladeblade-iconscountry-flagsflag-iconsinertiajavascriptlanguage-flagslaravelphpreactsvgsvg-iconstypescriptvuelaravelbladeflagscountry flagslanguage flags

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/outhebox-blade-flags/health.svg)

```
[![Health](https://phpackages.com/badges/outhebox-blade-flags/health.svg)](https://phpackages.com/packages/outhebox-blade-flags)
```

###  Alternatives

[stijnvanouplines/blade-country-flags

A package to easily make use of country flags in your Laravel Blade views.

26307.2k6](/packages/stijnvanouplines-blade-country-flags)[technikermathe/blade-lucide-icons

A package to easily make use of Lucide icons in your Laravel Blade views.

18299.2k7](/packages/technikermathe-blade-lucide-icons)[saade/blade-iconsax

A package to easily make use of Iconsax in your Laravel Blade views.

21138.5k](/packages/saade-blade-iconsax)[mckenziearts/blade-untitledui-icons

A package to easily make use of UntitledUI icons in your Laravel Blade views.

16104.9k5](/packages/mckenziearts-blade-untitledui-icons)[afatmustafa/blade-hugeicons

A package to easily make use of Hugeicons(Free version) in your Laravel Blade views.

13129.0k3](/packages/afatmustafa-blade-hugeicons)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)