city icon
city-line-duotone from Solar by 480 Design · Line Duotone · Building · CC-BY-4.0 Attribution required.
- Name
- city-line-duotone
- Set
- Solar
- Style
- Line Duotone
- Category
- Building
- Viewbox
- 24×24
- License
- CC BY 4.0
5 other variants in Solar
The same icon in other sets
More building icons from Solar
Use the city icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 22V16C17 14.1144 17 13.1716 16.4142 12.5858C15.8284 12 14.8856 12 13 12H11C9.11438 12 8.17157 12 7.58579 12.5858C7 13.1716 7 14.1144 7 16V22"/><path d="M21 21.9999V7.77195C21 6.4311 21 5.76068 20.6439 5.24676C20.2877 4.73283 19.66 4.49743 18.4045 4.02663C15.9492 3.10591 14.7216 2.64555 13.8608 3.2421C13 3.83864 13 5.14974 13 7.77195V11.9999" opacity=".5"/><path stroke-linecap="round" d="M3 22V12C3 10.1144 3 9.17157 3.58579 8.58579C4.17157 8 5.11438 8 7 8C8.88562 8 9.82843 8 10.4142 8.58579C11 9.17157 11 10.1144 11 12M4 8V6.5C4 5.55719 4 5.08579 4.29289 4.79289C4.58579 4.5 5.05719 4.5 6 4.5H8C8.94281 4.5 9.41421 4.5 9.70711 4.79289C10 5.08579 10 5.55719 10 6.5V8M7 4V2" opacity=".5"/><path stroke-linecap="round" d="M22 22L2 22"/><path stroke-linecap="round" d="M10 15H14" opacity=".5"/><path stroke-linecap="round" d="M10 18H14" opacity=".5"/></g></svg>
React
import type { SVGProps } from "react";
export function SolarCityLineDuotone(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M17 22V16C17 14.1144 17 13.1716 16.4142 12.5858C15.8284 12 14.8856 12 13 12H11C9.11438 12 8.17157 12 7.58579 12.5858C7 13.1716 7 14.1144 7 16V22"/><path d="M21 21.9999V7.77195C21 6.4311 21 5.76068 20.6439 5.24676C20.2877 4.73283 19.66 4.49743 18.4045 4.02663C15.9492 3.10591 14.7216 2.64555 13.8608 3.2421C13 3.83864 13 5.14974 13 7.77195V11.9999" opacity=".5"/><path strokeLinecap="round" d="M3 22V12C3 10.1144 3 9.17157 3.58579 8.58579C4.17157 8 5.11438 8 7 8C8.88562 8 9.82843 8 10.4142 8.58579C11 9.17157 11 10.1144 11 12M4 8V6.5C4 5.55719 4 5.08579 4.29289 4.79289C4.58579 4.5 5.05719 4.5 6 4.5H8C8.94281 4.5 9.41421 4.5 9.70711 4.79289C10 5.08579 10 5.55719 10 6.5V8M7 4V2" opacity=".5"/><path strokeLinecap="round" d="M22 22L2 22"/><path strokeLinecap="round" d="M10 15H14" opacity=".5"/><path strokeLinecap="round" d="M10 18H14" opacity=".5"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 22V16C17 14.1144 17 13.1716 16.4142 12.5858C15.8284 12 14.8856 12 13 12H11C9.11438 12 8.17157 12 7.58579 12.5858C7 13.1716 7 14.1144 7 16V22"/><path d="M21 21.9999V7.77195C21 6.4311 21 5.76068 20.6439 5.24676C20.2877 4.73283 19.66 4.49743 18.4045 4.02663C15.9492 3.10591 14.7216 2.64555 13.8608 3.2421C13 3.83864 13 5.14974 13 7.77195V11.9999" opacity=".5"/><path stroke-linecap="round" d="M3 22V12C3 10.1144 3 9.17157 3.58579 8.58579C4.17157 8 5.11438 8 7 8C8.88562 8 9.82843 8 10.4142 8.58579C11 9.17157 11 10.1144 11 12M4 8V6.5C4 5.55719 4 5.08579 4.29289 4.79289C4.58579 4.5 5.05719 4.5 6 4.5H8C8.94281 4.5 9.41421 4.5 9.70711 4.79289C10 5.08579 10 5.55719 10 6.5V8M7 4V2" opacity=".5"/><path stroke-linecap="round" d="M22 22L2 22"/><path stroke-linecap="round" d="M10 15H14" opacity=".5"/><path stroke-linecap="round" d="M10 18H14" opacity=".5"/></g></svg> </template>
CSS
.icon-city-line-duotone {
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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M17%2022V16C17%2014.1144%2017%2013.1716%2016.4142%2012.5858C15.8284%2012%2014.8856%2012%2013%2012H11C9.11438%2012%208.17157%2012%207.58579%2012.5858C7%2013.1716%207%2014.1144%207%2016V22%22%2F%3E%3Cpath%20d%3D%22M21%2021.9999V7.77195C21%206.4311%2021%205.76068%2020.6439%205.24676C20.2877%204.73283%2019.66%204.49743%2018.4045%204.02663C15.9492%203.10591%2014.7216%202.64555%2013.8608%203.2421C13%203.83864%2013%205.14974%2013%207.77195V11.9999%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M3%2022V12C3%2010.1144%203%209.17157%203.58579%208.58579C4.17157%208%205.11438%208%207%208C8.88562%208%209.82843%208%2010.4142%208.58579C11%209.17157%2011%2010.1144%2011%2012M4%208V6.5C4%205.55719%204%205.08579%204.29289%204.79289C4.58579%204.5%205.05719%204.5%206%204.5H8C8.94281%204.5%209.41421%204.5%209.70711%204.79289C10%205.08579%2010%205.55719%2010%206.5V8M7%204V2%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M22%2022L2%2022%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M10%2015H14%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M10%2018H14%22%20opacity%3D%22.5%22%2F%3E%3C%2Fg%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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M17%2022V16C17%2014.1144%2017%2013.1716%2016.4142%2012.5858C15.8284%2012%2014.8856%2012%2013%2012H11C9.11438%2012%208.17157%2012%207.58579%2012.5858C7%2013.1716%207%2014.1144%207%2016V22%22%2F%3E%3Cpath%20d%3D%22M21%2021.9999V7.77195C21%206.4311%2021%205.76068%2020.6439%205.24676C20.2877%204.73283%2019.66%204.49743%2018.4045%204.02663C15.9492%203.10591%2014.7216%202.64555%2013.8608%203.2421C13%203.83864%2013%205.14974%2013%207.77195V11.9999%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M3%2022V12C3%2010.1144%203%209.17157%203.58579%208.58579C4.17157%208%205.11438%208%207%208C8.88562%208%209.82843%208%2010.4142%208.58579C11%209.17157%2011%2010.1144%2011%2012M4%208V6.5C4%205.55719%204%205.08579%204.29289%204.79289C4.58579%204.5%205.05719%204.5%206%204.5H8C8.94281%204.5%209.41421%204.5%209.70711%204.79289C10%205.08579%2010%205.55719%2010%206.5V8M7%204V2%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M22%2022L2%2022%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M10%2015H14%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M10%2018H14%22%20opacity%3D%22.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/solar/city-line-duotone.svg?color=%231a73e8&size=48
