273 minimalist line-art SVG icons representing cities and their landmarks from around the world.
Live Site · What's New · Statistics · FAQ · City Roulette
A curated collection of hand-designed SVG icons — each one captures a city through its most recognizable landmark, symbol, or architectural feature. From the Eiffel Tower to the Sydney Opera House, from Tokyo's temples to Cairo's pyramids.
Browse, search, download, and copy — all for free.
→ Browse the collection at svgcities.com
| Region | Icons | Example Cities |
|---|---|---|
| Europe | 114 | Paris, Barcelona, Berlin, Rome, London, Prague, Amsterdam |
| Asia | 44 | Tokyo, Seoul, Shanghai, Delhi, Kyoto, Taipei, Thimphu |
| North America | 30 | New York, San Francisco, Toronto, Chicago, Vancouver |
| Middle East | 23 | Istanbul, Jerusalem, Dubai, Tehran, Baku |
| South America | 18 | Buenos Aires, Rio de Janeiro, São Paulo, Lima, Bogotá |
| Africa | 20 | Cairo, Cape Town, Marrakesh, Nairobi, Accra, Tunis, Windhoek |
| Oceania | 11 | Sydney, Melbourne, Wellington, Perth |
| Central America | 13 | Havana, San Juan, Nassau, Antigua, Willemstad, Soufrière |
- Browse 273 city icons organized by country and region
- Search by city name, country, tag, or region
- Download icons as clean, scalable SVG files
- Copy SVG code directly to your clipboard
- Share direct links to individual city pages
- Discover random destinations with City Roulette
- Dark mode with system preference detection
Every icon is a standalone SVG file. Grab them however you like:
Download from the site Visit any city page and click Download or Copy SVG.
Clone the repo
git clone https://github.com/anto1/city-icons.git
# Icons are in public/icons/
ls public/icons/
# fr-paris.svg de-berlin.svg jp-tokyo.svg ...Direct link
https://svgcities.com/icons/fr-paris.svg
https://svgcities.com/icons/jp-tokyo.svg
In HTML
<img src="https://svgcities.com/icons/fr-paris.svg" alt="Paris" width="56" height="56" />All files follow the pattern {ISO-country-code}-{city-slug}.svg:
fr-paris.svg → Paris, France
jp-tokyo.svg → Tokyo, Japan
us-new-york.svg → New York, USA
br-rio-de-janeiro.svg → Rio de Janeiro, Brazil
| Layer | Technology |
|---|---|
| Framework | Next.js 15 (App Router, SSG) |
| Frontend | React 19, TypeScript 5 |
| Styling | Tailwind CSS 4 |
| UI | Radix UI, Lucide icons, Sonner |
| Analytics | Fathom |
| Deploy | Vercel |
All 273 city pages are statically generated at build time. Icons are served as static files with 1-year immutable cache headers.
src/
├── app/ # Next.js App Router
│ ├── page.tsx # Homepage (all icons)
│ ├── [country]/[city]/ # Individual city pages
│ ├── faq/ # FAQ with structured data
│ ├── statistics/ # Collection statistics
│ ├── whats-new/ # Weekly changelog
│ ├── roulette/ # City Roulette
│ └── sitemap.ts # Dynamic XML sitemap
├── components/ # React components
├── data/icons/ # Icon metadata by region (JSON)
├── lib/ # Utilities (slugify, constants)
└── types/ # TypeScript interfaces
public/icons/ # 273 SVG files
npm install
npm run dev # Start dev server (Turbopack)
npm run build # Production build (SSG)
npm run lint # ESLintMissing your city? Send us an email with the city name, country, and optionally the landmark you'd like to see.
- Add your SVG to
public/icons/using the naming convention:{country-code}-{city}.svg - Add metadata to the appropriate region file in
src/data/icons/ - Update
src/data/changelog.ts - Run
npm run buildto verify
- Use semantic HTML (
nav,ul/li,article,section) - Keep structured data valid — test with Google Rich Results
- Use theme-aware Tailwind classes (no hardcoded colors)
- No
Math.random()in render paths (SSG hydration)
Icons are free for personal and educational use. Commercial use requires permission — contact icons@partdirector.ch.
See the full license for details.
Designed by Studio Partdirector