
What it costs
- Free tier
- Yes
Free, open-source flag icon set (250+ flags for Figma/Sketch and React/Vue/Svelte); optional donations.
Auto-checked on 8 August 2026Source
About Flagpack
What Is Flagpack?
Flagpack is a free, open source collection of over 260 flag icons designed for use in design tools and code projects. It serves as a **design resource** in the Design category, providing scalable SVG flag icons for over 250 countries that designers and developers can integrate into their workflows. Flagpack supports tools like Sketch and Figma through shared libraries, and offers developer integrations for JavaScript frameworks such as React, Vue, and Svelte.
What Flagpack Does
- Provides an index of flags searchable by country name, two-letter ISO code, three-letter ISO code, or numeric code.
- Offers flag icons in multiple shapes including rectangle, rounded rectangle, and circle, with options for custom shapes in design tools.
- Includes styling options such as border, drop shadow, and overlays like linear gradient, diagonal ripple, or circular ripple.
- Delivers scalable SVG icons and rasterized PNG versions for flexibility across design and development environments.
- Supports integration as shared libraries in Sketch and team libraries in Figma for easy insertion and customization via symbols or components.
- Enables code implementation through dedicated packages for React, Vue, Svelte, and other frameworks, with props for size, class, shadows, borders, and gradients.
How Flagpack Can Be Used
- UI designers insert Flagpack flags into Figma prototypes for international user location indicators or global app interfaces, customizing shapes and overlays to match brand styles.
- Developers add Flagpack components to React applications for country selectors in e-commerce sites, passing ISO codes dynamically for user profiles or shipping options.
- Teams use Flagpack in Sketch libraries to standardize flag assets across design systems, applying drop shadows or borders for better visibility in wireframes.
- Frontend projects in Vue or Svelte incorporate Flagpack for language switchers or event pages, leveraging predefined sizes like small, medium, or large.
- Designers export PNG flags from Flagpack for static assets in presentations or marketing materials requiring quick country representations.
Who Is Flagpack For?
Flagpack suits UI/UX designers working in Figma or Sketch who need consistent, customizable flag icons for global projects. Developers building international web apps with React, Vue, or Svelte benefit from its code-ready components. It fits teams creating design systems, localization features, or cross-border digital products where accurate country flags enhance user experience. Visit Flagpack
Featured Tools
SponsoredPryzm
Pryzm is a real-time studio for designers who need backgrounds that don't look like everyone else's. Layer procedural gradients, then stack glass, grain, light and blobs.
AI Boilerplate
The boilerplate built for vibe coding. Includes authentication, payments, storage, and a clean, AI-readable codebase, already wired up. Build on rails that don't break at prompt 100.
Framer
Design and launch your dream website with no coding required.
Your tool here
The tools above are our own picks until the slots sell.
Spotlight
SponsoredRotates dailyArtlist
Royalty-free music, SFX, 8K footage, templates, LUTs and 100+ AI models on a single subscription for video creators.
Tools we recommend
Editorially chosen. Some links above are affiliate links — if you sign up we may earn a commission, at no extra cost to you.
More Icons Tools


Animated Icons 2.0
Enhance your projects with 900+ animated icons.

Glyph Neue
Over 1,500 icons in SVG and PNG formats, free with attribution.


Line Awesome
Easily replace Font Awesome with modern line icons using one line of code.


Pichon
Drag and drop the best design graphics with ease.

Akar Icons
A perfectly rounded icon library designed for designers and developers.

Atlas Icons
Versatile open-source icon library, offering various stroke widths and formats.
Explore Other Categories
Discover more design resources
New to Design?
Explore our comprehensive design glossary to master essential terminology from A/B Testing to Wireframes.
Browse GlossaryLooking for something specific?
Search through our entire collection of design tools and resources
