
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
Pryzm
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.
Hue Codex
Hue Codex is a free, no-account color workspace for designers and developers, with palette generation, WCAG contrast checks, modern CSS tools, image color extraction, local saving, and exports.
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.
PromptCreek
Prompt Creek is a free community-driven repository featuring thousands of AI prompts. Discover, bookmark, and share quality prompts for ChatGPT, Claude, and other AI tools.
Vatis Tech
Vatis Tech is the most powerful speech-to-text infrastructure. It can be used to transcribe user interviews and client meetings.
Webflow
Accelerate website creation without needing to code.
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

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


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

Atlas Icons
Versatile open-source icon library, offering various stroke widths and formats.

Basicons
Essential icons perfect for product design and development.

Boxicons
Simple, open-source icons crafted for designers and developers.

Circum
A handpicked collection of open-source icons.
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
