city icon

city from Font Awesome Solid by Dave Gandy · Solid · Buildings · CC-BY-4.0 Attribution required.

Name: city
Set: Font Awesome Solid
Style: Solid
Category: Buildings
Viewbox: 640×640
License: CC BY 4.0

The same icon in other sets

cityBoxIcons v2 Solid cityFont Awesome 6 Solid city-16-filledFluent UI System Icons cityHealth Icons cityIconPark cityIconPark Outline cityIconPark Solid cityIconPark TwoTone cityIconoir cityLine Awesome cityMaterial Design Icons cityPhosphor city-boldSolar cityTDesign Icons

More buildings icons from Font Awesome Solid

archway building church clinic-medical dungeon gopuram home hospital hospital-alt hospital-user hotel house-damage igloo industry kaaba landmark monument mosque place-of-worship school store store-alt synagogue torii-gate

Use the city icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M352 64c-35.3 0-64 28.7-64 64v32h-48V88c0-13.3-10.7-24-24-24s-24 10.7-24 24v72h-64V88c0-13.3-10.7-24-24-24S80 74.7 80 88v74c-27.6 7.1-48 32.2-48 62v288c0 35.3 28.7 64 64 64h448c35.3 0 64-28.7 64-64V320c0-35.3-28.7-64-64-64h-64V128c0-35.3-28.7-64-64-64zm64 112v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16m-16 80c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16zm16 112v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16m112-16c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16zm-240 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16m-16-112c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16zM160 368v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16m-16-112c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16z"/></svg>

React

import type { SVGProps } from "react";

export function Fa7SolidCity(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M352 64c-35.3 0-64 28.7-64 64v32h-48V88c0-13.3-10.7-24-24-24s-24 10.7-24 24v72h-64V88c0-13.3-10.7-24-24-24S80 74.7 80 88v74c-27.6 7.1-48 32.2-48 62v288c0 35.3 28.7 64 64 64h448c35.3 0 64-28.7 64-64V320c0-35.3-28.7-64-64-64h-64V128c0-35.3-28.7-64-64-64zm64 112v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16m-16 80c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16zm16 112v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16m112-16c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16zm-240 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16m-16-112c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16zM160 368v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16m-16-112c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M352 64c-35.3 0-64 28.7-64 64v32h-48V88c0-13.3-10.7-24-24-24s-24 10.7-24 24v72h-64V88c0-13.3-10.7-24-24-24S80 74.7 80 88v74c-27.6 7.1-48 32.2-48 62v288c0 35.3 28.7 64 64 64h448c35.3 0 64-28.7 64-64V320c0-35.3-28.7-64-64-64h-64V128c0-35.3-28.7-64-64-64zm64 112v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16m-16 80c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16zm16 112v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16m112-16c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16zm-240 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16m-16-112c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16zM160 368v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16m-16-112c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16z"/></svg>
</template>

CSS

.icon-city {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M352%2064c-35.3%200-64%2028.7-64%2064v32h-48V88c0-13.3-10.7-24-24-24s-24%2010.7-24%2024v72h-64V88c0-13.3-10.7-24-24-24S80%2074.7%2080%2088v74c-27.6%207.1-48%2032.2-48%2062v288c0%2035.3%2028.7%2064%2064%2064h448c35.3%200%2064-28.7%2064-64V320c0-35.3-28.7-64-64-64h-64V128c0-35.3-28.7-64-64-64zm64%20112v32c0%208.8-7.2%2016-16%2016h-32c-8.8%200-16-7.2-16-16v-32c0-8.8%207.2-16%2016-16h32c8.8%200%2016%207.2%2016%2016m-16%2080c8.8%200%2016%207.2%2016%2016v32c0%208.8-7.2%2016-16%2016h-32c-8.8%200-16-7.2-16-16v-32c0-8.8%207.2-16%2016-16zm16%20112v32c0%208.8-7.2%2016-16%2016h-32c-8.8%200-16-7.2-16-16v-32c0-8.8%207.2-16%2016-16h32c8.8%200%2016%207.2%2016%2016m112-16c8.8%200%2016%207.2%2016%2016v32c0%208.8-7.2%2016-16%2016h-32c-8.8%200-16-7.2-16-16v-32c0-8.8%207.2-16%2016-16zm-240%2016v32c0%208.8-7.2%2016-16%2016h-32c-8.8%200-16-7.2-16-16v-32c0-8.8%207.2-16%2016-16h32c8.8%200%2016%207.2%2016%2016m-16-112c8.8%200%2016%207.2%2016%2016v32c0%208.8-7.2%2016-16%2016h-32c-8.8%200-16-7.2-16-16v-32c0-8.8%207.2-16%2016-16zM160%20368v32c0%208.8-7.2%2016-16%2016h-32c-8.8%200-16-7.2-16-16v-32c0-8.8%207.2-16%2016-16h32c8.8%200%2016%207.2%2016%2016m-16-112c8.8%200%2016%207.2%2016%2016v32c0%208.8-7.2%2016-16%2016h-32c-8.8%200-16-7.2-16-16v-32c0-8.8%207.2-16%2016-16z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M352%2064c-35.3%200-64%2028.7-64%2064v32h-48V88c0-13.3-10.7-24-24-24s-24%2010.7-24%2024v72h-64V88c0-13.3-10.7-24-24-24S80%2074.7%2080%2088v74c-27.6%207.1-48%2032.2-48%2062v288c0%2035.3%2028.7%2064%2064%2064h448c35.3%200%2064-28.7%2064-64V320c0-35.3-28.7-64-64-64h-64V128c0-35.3-28.7-64-64-64zm64%20112v32c0%208.8-7.2%2016-16%2016h-32c-8.8%200-16-7.2-16-16v-32c0-8.8%207.2-16%2016-16h32c8.8%200%2016%207.2%2016%2016m-16%2080c8.8%200%2016%207.2%2016%2016v32c0%208.8-7.2%2016-16%2016h-32c-8.8%200-16-7.2-16-16v-32c0-8.8%207.2-16%2016-16zm16%20112v32c0%208.8-7.2%2016-16%2016h-32c-8.8%200-16-7.2-16-16v-32c0-8.8%207.2-16%2016-16h32c8.8%200%2016%207.2%2016%2016m112-16c8.8%200%2016%207.2%2016%2016v32c0%208.8-7.2%2016-16%2016h-32c-8.8%200-16-7.2-16-16v-32c0-8.8%207.2-16%2016-16zm-240%2016v32c0%208.8-7.2%2016-16%2016h-32c-8.8%200-16-7.2-16-16v-32c0-8.8%207.2-16%2016-16h32c8.8%200%2016%207.2%2016%2016m-16-112c8.8%200%2016%207.2%2016%2016v32c0%208.8-7.2%2016-16%2016h-32c-8.8%200-16-7.2-16-16v-32c0-8.8%207.2-16%2016-16zM160%20368v32c0%208.8-7.2%2016-16%2016h-32c-8.8%200-16-7.2-16-16v-32c0-8.8%207.2-16%2016-16h32c8.8%200%2016%207.2%2016%2016m-16-112c8.8%200%2016%207.2%2016%2016v32c0%208.8-7.2%2016-16%2016h-32c-8.8%200-16-7.2-16-16v-32c0-8.8%207.2-16%2016-16z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa7-solid/city.svg?color=%231a73e8&size=48