Development

Flagpack contains 250+ flag icons to easily use within your code project. Flagpack is an open source project and available for JavaScript frameworks React, Vue and Svelte.

Properties

The flag icons can be styled quickly and easily through an array of component options. This means you can use beautifully styled out-the-box flags in your code project within minutes.

For React

Use Flagpack as customizable React Components.

Using Flagpack with React

For Vue

Use Flagpack as customizable Vue Components.

Using Flagpack with Vue

For Svelte

Use Flagpack as customizable Svelte Components.

Using Flagpack with Svelte

Sizes

FlackPag's flag icons come in three predefined sizes: S (16×12px), M (20×15px) and L (32×24px).

S is the smallest flag size and its design is optimized to be recognizable on a small scale. Just like size M, this smallest size S is highly suitable to use within user interface elements like popovers and drop-down selects. Size L contains most details of the predefined sizes. If you feel a need to scale the flag icons up use size L for the best results.

Example with small, medium and large flag sizes.

Shapes

Each flag icon is available in three predefined shapes by default: a rectangle, a rounded rectangle and a circle. If you're comfortable in your design tool of choice you could also customize this shape. Learn more about how to customize the shape in Sketch or Figma

Example with regular, rounded and circular flags.

Styles

By default Flagpack flag icons come with the following styling options for each flag:

Border
Drop shadow
Overlay

Border

Choose to add a subtle inset 1px border to a flag icon to enhance the visibility on light backgrounds or go with the border-less version for a clean look.

Drop shadows

Flagpack flags icons have an optional drop shadow. This adds a subtle shadow to the back of the flags.

Overlay

There are three different optional overlay options:

Linear gradient
Diagonal ripple
Circular ripple

	None	Border	Drop Shadow	Border + Drop shadow
None
Linear Gradient
Diagonal Ripple
Circular Ripple

Reporting issues

If you have questions or comments, please create an Issue on GitHub. For instance if you want to request edits to flags or if you would like to have additional flags added to Flagpack.

Contributing

Flagpack is an open source project and any contribution is greatly appreciated. If you find anything that can use improvement please contribute on GitHub.

Get started

Read how to get started using Flagpack in your favorite JS framework