Design

To make your life as a designer easier you can insert flags and alter their look and feel through symbols/components overwrites. All individual flag icons are also available as rasterized PNGs and scalable SVGs.

Using Flagpack with Sketch or Figma

Want to get started using use Flagpack in your favorite design tool right away? Add it as a Sketch Cloud Library to Sketch or use as a Team Library in Figma.

Flagpack for Sketch

Use Flagpack as a Shared Library or download it as a standalone file to get started with Flackpag in Sketch.

Using Flagpack in Sketch
Flagpack for Figma

Duplicate the Figma Community File to get started with Flagpack in Figma as stand-alone figma file or team library.

Using Flagpack in Figma

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

Get started

Read how to get started using Flagpack in your favorite design tool

Flagpack for Sketch
Learn how to use Flagpack with Sketch
Flagpack for Figma
Learn how to use Flagpack with Figma