GeoIcons Blog

Releases, deep dives, and practical guides on mapping the world with tree-shakable SVG icons.

  • Rushan

    SVG icons in React Server Components: what ships to the client

    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.

    • react
    • nextjs
    • server-components
    • svg-icons
    • performance
    • geoicons
  • Rushan

    Subdivision icons: states, provinces, and parishes as SVGs

    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.

    • subdivisions
    • states
    • provinces
    • svg-icons
    • geoicons
  • Rushan

    How to add country icons to an Angular app

    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.

    • angular
    • country-icons
    • svg-icons
    • tutorial
    • geoicons
  • Rushan

    Visual Alignment for Icons and Labels in Tailwind CSS

    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.

    • tailwindcss
    • design
    • layout
    • alignment
    • geoicons
  • Rushan

    Build a list view component in React with GeoIcons

    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.

    • react
    • country-icons
    • listview
    • accessibility
    • geoicons
  • Rushan

    How to add country icons to a React app

    Add scalable country map icons to a React app in three steps: install @geoicons/react, import by ISO code, and render. Covers sizing, color, and accessibility.

    • react
    • country-icons
    • svg-icons
    • tutorial
    • geoicons
  • Rushan

    Why an icon library doesn't have to bloat your bundle

    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.

    • tree-shaking
    • bundle-size
    • react
    • performance
    • geoicons
  • Rushan

    Introducing GeoIcons: 799 tree-shakable geographic icons

    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.

    • announcement
    • geoicons
    • react
    • svg-icons