Releases, deep dives, and practical guides on mapping the world with tree-shakable SVG icons.
Build an interactive SVG region picker and a data-colored state grid in React with GeoIcons. Clickable, accessible, tree-shakable, and no map library needed.
Add scalable country map icons to a Vue 3 app in three steps: install @geoicons/vue, import by country name, and render. Covers sizing, attribute fallthrough, and accessibility.
An icon library can turn your Next.js page into a client tree without breaking anything. Check whether yours does, render icons in a Server Component, and confirm no icon code shipped to the browser.
GeoIcons now ships 377 subdivision icons across 23 countries: US states, Canadian provinces, Mexican states, and Central American and Caribbean districts. Here is what they are, how they are named, and how to use them.
A screen reader cannot name an SVG icon until you label it. Learn when to mark an icon decorative, when to label it, and why every title element needs a unique id.
Add scalable country map icons to an Angular app in three steps: install @geoicons/angular, import the standalone component by ISO code, and render it. Covers inputs, styling, and accessibility.
ISO 3166-1 alpha-2 for developers: the 249 official codes, the reserved ranges, why the UK is GB, where Kosovo fits, and how to store codes safely.
Sizing and positioning vector outlines and SVG icons alongside text labels presents visual alignment challenges. Use these Tailwind CSS configurations to align icons and typography.
Pasting flag emojis into country selectors carries design and platform costs. Here is why vector map shapes offer a cleaner, more consistent alternative.
GeoIcons inherit their color from CSS through currentColor, so they follow your light and dark themes with no per-icon color prop. Here is how to wire it up.
A country list view in React with GeoIcons: map ISO codes to icon components, render a map icon per row, add selectable rows, and keep the list accessible.
Add scalable country map icons and country SVG icons to a React app in three steps: install @geoicons/react, import by ISO code, and render. Covers sizing, color, and accessibility.
Tree-shaking lets you ship a large icon library and pay only for the icons you import. Here is how it works, how icon libraries break it, and how to verify your own bundle.
A tree-shakable geographic icon library for React, Vue, Angular, and vanilla JS: 255 countries, 167 areas, and 377 subdivisions, each its own named export, themed with currentColor.