What it does
Flagpack is an open source flag-icon project for design tools and application code. It provides React, Vue and Svelte components, with Figma and Sketch libraries and predefined sizes and effects.
Flagpack provides three deliberately different sizes: 16 by 12, 20 by 15 and 32 by 24 pixels. Small flags simplify detail for compact controls; the largest is the recommended starting point for scaling up. Borders, shadows and gradient overlays offer matching treatments across a country selector.
In React, install react-flagpack and add its command to your package’s postinstall script so the flag files reach the public or static folder. Import Flag and react-flagpack/dist/style.css, then choose a code such as NL and a size such as M. The stylesheet is needed for styling properties beyond code and size. If your package manager skips postinstall, run the command manually.
Figma users can duplicate the community file; Sketch users can download a standalone file or shared library. Flagpack follows ISO 3166 with documented regional exceptions, including separate UK-country flags. The MIT licence permits commercial use while requiring its copyright and permission notice to remain with distributed copies.
Strengths
- Provides size-specific designs and configurable effects.
- Offers matching design-tool and framework routes.
Watch out for
- The React package needs a static-asset installation step and a separate stylesheet for its styling controls.
Best for
- Country selectors with compact flag illustrations.
- Teams sharing flag styles between design files and code.
Sources
- Flagpack (Oct 27, 2026)
- Flagpack: Development (Oct 27, 2026)
- Flagpack Core README (Oct 27, 2026)
- Flagpack for React README (Oct 27, 2026)
- Flagpack Core: MIT License (Oct 27, 2026)