Cirrus Flag Component


4.0.03 years ago4 years agoMinified + gzip package size for @lightspeed/cirrus-flag in KB



A set of small and readable flags.


First, make sure you have been through the Getting Started steps of adding Cirrus in your application.

If using Yarn:

yarn add @lightspeed/cirrus-flag

Or using npm:

npm i -S @lightspeed/cirrus-flag


Flags as React components are automatically generated with a build script. To see changes when adding/updating a flag, add your .svg in the svg folder, navigate to this directory in the terminal, and run this command to re-generate the build:

yarn prepublish

This script will generate the React components and the Flag sprite.

Note that this command will be run automatically when in local development and when we publish to npm.


Import required styles in your .scss:

@import '@lightspeed/cirrus-flag/Flag.scss';

React Component


Color properties can be any Cirrus color token, ex green-100 or any CSS value.

Prop Type Description
code string ISO 3166-2 Country code (case is insensitive)
name string Country / Region / Other name (case is insensitive)
size string Default 16 by 12, can be set to any custom value, the height will scale to be 75%


import React from 'react';
import Icon from '@lightspeed/cirrus-flag';

const MyComponent = () => (
    <Flag code="CA" />
    <Flag name="Canada" />
    <Flag code="CA-QC" />
    <Flag name="Quebec" />
    <Flag code="nl" size="1.75rem" />

export default MyComponent;

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.