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