fog emoji

fog from Twitter Emoji by Twitter · Default · Travel & Places · CC-BY-4.0 Attribution required.

Name
fog
Set
Twitter Emoji
Style
Default
Category
Travel & Places
Viewbox
36×36
License
CC BY 4.0

The same emoji in other sets

fogCarbonfogEmoji One (Colored)fogFluent EmojifogFluent Emoji FlatfogFluent Emoji High ContrastfogFirefox OS EmojifogIconParkfogIconPark OutlinefogIconoirfog-fillMingCute IconfogNoto EmojifogOpenMojifog-boldSolarfogTDesign Icons

More travel & places icons from Twitter Emoji

aerial-tramwayairplaneairplane-arrivalairplane-departurealarm-clockambulanceanchorarticulated-lorryauto-rickshawautomobilebankbarber-polebeach-with-umbrellabellhop-bellbicyclebrickbridge-at-nightbuilding-constructionbullet-trainbusbus-stopcampingcanoecarousel-horse

Use the fog emoji

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#f5f8fa" d="M32 0H4a4 4 0 0 0-4 4v6h36V4a4 4 0 0 0-4-4"/><path fill="#e1e8ed" d="M36 16.368V9.257a4.15 4.15 0 0 0-2.188-.632c-1.325 0-2.491.627-3.259 1.588A4.47 4.47 0 0 0 27.5 9c-.721 0-1.392.185-1.996.486C24.763 8.018 23.257 7 21.5 7c-.607 0-1.184.124-1.712.342a3.49 3.49 0 0 0-6.189-.8A4.44 4.44 0 0 0 11.5 6c-1.641 0-3.062.887-3.848 2.198A4.99 4.99 0 0 0 3 5a4.96 4.96 0 0 0-3 1.022v7.955C.838 14.611 24.5 18 24.5 18s10.862-1.238 11.5-1.632"/><path fill="#ccd6dd" d="M36 14.771C35.157 13.7 33.864 13 32.396 13c-1.997 0-3.681 1.279-4.318 3.059A3.4 3.4 0 0 0 27.5 16c-.82 0-1.565.294-2.162.767A3.96 3.96 0 0 0 23 16c-.353 0-.689.06-1.015.146c.002-.049.015-.096.015-.146a4 4 0 0 0-4-4a3.97 3.97 0 0 0-3.024 1.409A5 5 0 0 0 13 13c-.18 0-.35.034-.525.053A7 7 0 0 0 6 8.709a6.99 6.99 0 0 0-6 3.408v13.544l32.396-1.452s2.761-1.343 3.604-2.966z"/><path fill="#e1e8ed" d="M36 30.499V20.422A5 5 0 0 0 34 20a4.99 4.99 0 0 0-4.652 3.198C28.562 21.887 27.141 21 25.5 21c-.763 0-1.47.207-2.099.542a3.49 3.49 0 0 0-6.189.8A4.5 4.5 0 0 0 15.5 22c-1.757 0-3.263 1.018-4.004 2.486A4.45 4.45 0 0 0 9.5 24a4.47 4.47 0 0 0-3.054 1.213c-.768-.961-1.934-1.588-3.259-1.588c-1.284 0-2.419.591-3.188 1.501v5.373z"/><path fill="#f5f8fa" d="M25 25c-.821 0-1.582.249-2.217.673a4.355 4.355 0 0 0-4.534-2.863a4.35 4.35 0 0 0-3.777 3.298a3.3 3.3 0 0 0-.55 0a3.3 3.3 0 0 0-1.965.93a3.76 3.76 0 0 0-2.278-.498a3.7 3.7 0 0 0-.942.236c-.003-.047.004-.093 0-.139a3.79 3.79 0 0 0-4.155-3.387a3.77 3.77 0 0 0-2.716 1.619A4.7 4.7 0 0 0 0 24.672V32c0 .773.23 1.489.61 2.101C.715 34.098 29 31.209 29 29s-1.791-4-4-4"/><path fill="#ccd6dd" d="M32 36a4 4 0 0 0 4-4v-7.608a7 7 0 0 0-3-.683a7 7 0 0 0-6.475 4.344C26.35 28.034 26.18 28 26 28c-.702 0-1.369.147-1.976.409A3.97 3.97 0 0 0 21 27a4 4 0 0 0-4 4c0 .05.013.097.015.146A4 4 0 0 0 16 31c-.876 0-1.679.289-2.338.767A3.47 3.47 0 0 0 11.5 31a3.3 3.3 0 0 0-.577.059C10.286 29.279 8.602 28 6.604 28c-1.987 0-3.665 1.266-4.31 3.03C2.195 31.022 2.101 31 2 31c-.732 0-1.41.211-2 .555V32a4 4 0 0 0 4 4z"/></svg>

React

import type { SVGProps } from "react";

export function TwemojiFog(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#f5f8fa" d="M32 0H4a4 4 0 0 0-4 4v6h36V4a4 4 0 0 0-4-4"/><path fill="#e1e8ed" d="M36 16.368V9.257a4.15 4.15 0 0 0-2.188-.632c-1.325 0-2.491.627-3.259 1.588A4.47 4.47 0 0 0 27.5 9c-.721 0-1.392.185-1.996.486C24.763 8.018 23.257 7 21.5 7c-.607 0-1.184.124-1.712.342a3.49 3.49 0 0 0-6.189-.8A4.44 4.44 0 0 0 11.5 6c-1.641 0-3.062.887-3.848 2.198A4.99 4.99 0 0 0 3 5a4.96 4.96 0 0 0-3 1.022v7.955C.838 14.611 24.5 18 24.5 18s10.862-1.238 11.5-1.632"/><path fill="#ccd6dd" d="M36 14.771C35.157 13.7 33.864 13 32.396 13c-1.997 0-3.681 1.279-4.318 3.059A3.4 3.4 0 0 0 27.5 16c-.82 0-1.565.294-2.162.767A3.96 3.96 0 0 0 23 16c-.353 0-.689.06-1.015.146c.002-.049.015-.096.015-.146a4 4 0 0 0-4-4a3.97 3.97 0 0 0-3.024 1.409A5 5 0 0 0 13 13c-.18 0-.35.034-.525.053A7 7 0 0 0 6 8.709a6.99 6.99 0 0 0-6 3.408v13.544l32.396-1.452s2.761-1.343 3.604-2.966z"/><path fill="#e1e8ed" d="M36 30.499V20.422A5 5 0 0 0 34 20a4.99 4.99 0 0 0-4.652 3.198C28.562 21.887 27.141 21 25.5 21c-.763 0-1.47.207-2.099.542a3.49 3.49 0 0 0-6.189.8A4.5 4.5 0 0 0 15.5 22c-1.757 0-3.263 1.018-4.004 2.486A4.45 4.45 0 0 0 9.5 24a4.47 4.47 0 0 0-3.054 1.213c-.768-.961-1.934-1.588-3.259-1.588c-1.284 0-2.419.591-3.188 1.501v5.373z"/><path fill="#f5f8fa" d="M25 25c-.821 0-1.582.249-2.217.673a4.355 4.355 0 0 0-4.534-2.863a4.35 4.35 0 0 0-3.777 3.298a3.3 3.3 0 0 0-.55 0a3.3 3.3 0 0 0-1.965.93a3.76 3.76 0 0 0-2.278-.498a3.7 3.7 0 0 0-.942.236c-.003-.047.004-.093 0-.139a3.79 3.79 0 0 0-4.155-3.387a3.77 3.77 0 0 0-2.716 1.619A4.7 4.7 0 0 0 0 24.672V32c0 .773.23 1.489.61 2.101C.715 34.098 29 31.209 29 29s-1.791-4-4-4"/><path fill="#ccd6dd" d="M32 36a4 4 0 0 0 4-4v-7.608a7 7 0 0 0-3-.683a7 7 0 0 0-6.475 4.344C26.35 28.034 26.18 28 26 28c-.702 0-1.369.147-1.976.409A3.97 3.97 0 0 0 21 27a4 4 0 0 0-4 4c0 .05.013.097.015.146A4 4 0 0 0 16 31c-.876 0-1.679.289-2.338.767A3.47 3.47 0 0 0 11.5 31a3.3 3.3 0 0 0-.577.059C10.286 29.279 8.602 28 6.604 28c-1.987 0-3.665 1.266-4.31 3.03C2.195 31.022 2.101 31 2 31c-.732 0-1.41.211-2 .555V32a4 4 0 0 0 4 4z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#f5f8fa" d="M32 0H4a4 4 0 0 0-4 4v6h36V4a4 4 0 0 0-4-4"/><path fill="#e1e8ed" d="M36 16.368V9.257a4.15 4.15 0 0 0-2.188-.632c-1.325 0-2.491.627-3.259 1.588A4.47 4.47 0 0 0 27.5 9c-.721 0-1.392.185-1.996.486C24.763 8.018 23.257 7 21.5 7c-.607 0-1.184.124-1.712.342a3.49 3.49 0 0 0-6.189-.8A4.44 4.44 0 0 0 11.5 6c-1.641 0-3.062.887-3.848 2.198A4.99 4.99 0 0 0 3 5a4.96 4.96 0 0 0-3 1.022v7.955C.838 14.611 24.5 18 24.5 18s10.862-1.238 11.5-1.632"/><path fill="#ccd6dd" d="M36 14.771C35.157 13.7 33.864 13 32.396 13c-1.997 0-3.681 1.279-4.318 3.059A3.4 3.4 0 0 0 27.5 16c-.82 0-1.565.294-2.162.767A3.96 3.96 0 0 0 23 16c-.353 0-.689.06-1.015.146c.002-.049.015-.096.015-.146a4 4 0 0 0-4-4a3.97 3.97 0 0 0-3.024 1.409A5 5 0 0 0 13 13c-.18 0-.35.034-.525.053A7 7 0 0 0 6 8.709a6.99 6.99 0 0 0-6 3.408v13.544l32.396-1.452s2.761-1.343 3.604-2.966z"/><path fill="#e1e8ed" d="M36 30.499V20.422A5 5 0 0 0 34 20a4.99 4.99 0 0 0-4.652 3.198C28.562 21.887 27.141 21 25.5 21c-.763 0-1.47.207-2.099.542a3.49 3.49 0 0 0-6.189.8A4.5 4.5 0 0 0 15.5 22c-1.757 0-3.263 1.018-4.004 2.486A4.45 4.45 0 0 0 9.5 24a4.47 4.47 0 0 0-3.054 1.213c-.768-.961-1.934-1.588-3.259-1.588c-1.284 0-2.419.591-3.188 1.501v5.373z"/><path fill="#f5f8fa" d="M25 25c-.821 0-1.582.249-2.217.673a4.355 4.355 0 0 0-4.534-2.863a4.35 4.35 0 0 0-3.777 3.298a3.3 3.3 0 0 0-.55 0a3.3 3.3 0 0 0-1.965.93a3.76 3.76 0 0 0-2.278-.498a3.7 3.7 0 0 0-.942.236c-.003-.047.004-.093 0-.139a3.79 3.79 0 0 0-4.155-3.387a3.77 3.77 0 0 0-2.716 1.619A4.7 4.7 0 0 0 0 24.672V32c0 .773.23 1.489.61 2.101C.715 34.098 29 31.209 29 29s-1.791-4-4-4"/><path fill="#ccd6dd" d="M32 36a4 4 0 0 0 4-4v-7.608a7 7 0 0 0-3-.683a7 7 0 0 0-6.475 4.344C26.35 28.034 26.18 28 26 28c-.702 0-1.369.147-1.976.409A3.97 3.97 0 0 0 21 27a4 4 0 0 0-4 4c0 .05.013.097.015.146A4 4 0 0 0 16 31c-.876 0-1.679.289-2.338.767A3.47 3.47 0 0 0 11.5 31a3.3 3.3 0 0 0-.577.059C10.286 29.279 8.602 28 6.604 28c-1.987 0-3.665 1.266-4.31 3.03C2.195 31.022 2.101 31 2 31c-.732 0-1.41.211-2 .555V32a4 4 0 0 0 4 4z"/></svg>
</template>

CSS

.icon-fog {
  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%2036%2036%22%3E%3Cpath%20fill%3D%22%23f5f8fa%22%20d%3D%22M32%200H4a4%204%200%200%200-4%204v6h36V4a4%204%200%200%200-4-4%22%2F%3E%3Cpath%20fill%3D%22%23e1e8ed%22%20d%3D%22M36%2016.368V9.257a4.15%204.15%200%200%200-2.188-.632c-1.325%200-2.491.627-3.259%201.588A4.47%204.47%200%200%200%2027.5%209c-.721%200-1.392.185-1.996.486C24.763%208.018%2023.257%207%2021.5%207c-.607%200-1.184.124-1.712.342a3.49%203.49%200%200%200-6.189-.8A4.44%204.44%200%200%200%2011.5%206c-1.641%200-3.062.887-3.848%202.198A4.99%204.99%200%200%200%203%205a4.96%204.96%200%200%200-3%201.022v7.955C.838%2014.611%2024.5%2018%2024.5%2018s10.862-1.238%2011.5-1.632%22%2F%3E%3Cpath%20fill%3D%22%23ccd6dd%22%20d%3D%22M36%2014.771C35.157%2013.7%2033.864%2013%2032.396%2013c-1.997%200-3.681%201.279-4.318%203.059A3.4%203.4%200%200%200%2027.5%2016c-.82%200-1.565.294-2.162.767A3.96%203.96%200%200%200%2023%2016c-.353%200-.689.06-1.015.146c.002-.049.015-.096.015-.146a4%204%200%200%200-4-4a3.97%203.97%200%200%200-3.024%201.409A5%205%200%200%200%2013%2013c-.18%200-.35.034-.525.053A7%207%200%200%200%206%208.709a6.99%206.99%200%200%200-6%203.408v13.544l32.396-1.452s2.761-1.343%203.604-2.966z%22%2F%3E%3Cpath%20fill%3D%22%23e1e8ed%22%20d%3D%22M36%2030.499V20.422A5%205%200%200%200%2034%2020a4.99%204.99%200%200%200-4.652%203.198C28.562%2021.887%2027.141%2021%2025.5%2021c-.763%200-1.47.207-2.099.542a3.49%203.49%200%200%200-6.189.8A4.5%204.5%200%200%200%2015.5%2022c-1.757%200-3.263%201.018-4.004%202.486A4.45%204.45%200%200%200%209.5%2024a4.47%204.47%200%200%200-3.054%201.213c-.768-.961-1.934-1.588-3.259-1.588c-1.284%200-2.419.591-3.188%201.501v5.373z%22%2F%3E%3Cpath%20fill%3D%22%23f5f8fa%22%20d%3D%22M25%2025c-.821%200-1.582.249-2.217.673a4.355%204.355%200%200%200-4.534-2.863a4.35%204.35%200%200%200-3.777%203.298a3.3%203.3%200%200%200-.55%200a3.3%203.3%200%200%200-1.965.93a3.76%203.76%200%200%200-2.278-.498a3.7%203.7%200%200%200-.942.236c-.003-.047.004-.093%200-.139a3.79%203.79%200%200%200-4.155-3.387a3.77%203.77%200%200%200-2.716%201.619A4.7%204.7%200%200%200%200%2024.672V32c0%20.773.23%201.489.61%202.101C.715%2034.098%2029%2031.209%2029%2029s-1.791-4-4-4%22%2F%3E%3Cpath%20fill%3D%22%23ccd6dd%22%20d%3D%22M32%2036a4%204%200%200%200%204-4v-7.608a7%207%200%200%200-3-.683a7%207%200%200%200-6.475%204.344C26.35%2028.034%2026.18%2028%2026%2028c-.702%200-1.369.147-1.976.409A3.97%203.97%200%200%200%2021%2027a4%204%200%200%200-4%204c0%20.05.013.097.015.146A4%204%200%200%200%2016%2031c-.876%200-1.679.289-2.338.767A3.47%203.47%200%200%200%2011.5%2031a3.3%203.3%200%200%200-.577.059C10.286%2029.279%208.602%2028%206.604%2028c-1.987%200-3.665%201.266-4.31%203.03C2.195%2031.022%202.101%2031%202%2031c-.732%200-1.41.211-2%20.555V32a4%204%200%200%200%204%204z%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%2036%2036%22%3E%3Cpath%20fill%3D%22%23f5f8fa%22%20d%3D%22M32%200H4a4%204%200%200%200-4%204v6h36V4a4%204%200%200%200-4-4%22%2F%3E%3Cpath%20fill%3D%22%23e1e8ed%22%20d%3D%22M36%2016.368V9.257a4.15%204.15%200%200%200-2.188-.632c-1.325%200-2.491.627-3.259%201.588A4.47%204.47%200%200%200%2027.5%209c-.721%200-1.392.185-1.996.486C24.763%208.018%2023.257%207%2021.5%207c-.607%200-1.184.124-1.712.342a3.49%203.49%200%200%200-6.189-.8A4.44%204.44%200%200%200%2011.5%206c-1.641%200-3.062.887-3.848%202.198A4.99%204.99%200%200%200%203%205a4.96%204.96%200%200%200-3%201.022v7.955C.838%2014.611%2024.5%2018%2024.5%2018s10.862-1.238%2011.5-1.632%22%2F%3E%3Cpath%20fill%3D%22%23ccd6dd%22%20d%3D%22M36%2014.771C35.157%2013.7%2033.864%2013%2032.396%2013c-1.997%200-3.681%201.279-4.318%203.059A3.4%203.4%200%200%200%2027.5%2016c-.82%200-1.565.294-2.162.767A3.96%203.96%200%200%200%2023%2016c-.353%200-.689.06-1.015.146c.002-.049.015-.096.015-.146a4%204%200%200%200-4-4a3.97%203.97%200%200%200-3.024%201.409A5%205%200%200%200%2013%2013c-.18%200-.35.034-.525.053A7%207%200%200%200%206%208.709a6.99%206.99%200%200%200-6%203.408v13.544l32.396-1.452s2.761-1.343%203.604-2.966z%22%2F%3E%3Cpath%20fill%3D%22%23e1e8ed%22%20d%3D%22M36%2030.499V20.422A5%205%200%200%200%2034%2020a4.99%204.99%200%200%200-4.652%203.198C28.562%2021.887%2027.141%2021%2025.5%2021c-.763%200-1.47.207-2.099.542a3.49%203.49%200%200%200-6.189.8A4.5%204.5%200%200%200%2015.5%2022c-1.757%200-3.263%201.018-4.004%202.486A4.45%204.45%200%200%200%209.5%2024a4.47%204.47%200%200%200-3.054%201.213c-.768-.961-1.934-1.588-3.259-1.588c-1.284%200-2.419.591-3.188%201.501v5.373z%22%2F%3E%3Cpath%20fill%3D%22%23f5f8fa%22%20d%3D%22M25%2025c-.821%200-1.582.249-2.217.673a4.355%204.355%200%200%200-4.534-2.863a4.35%204.35%200%200%200-3.777%203.298a3.3%203.3%200%200%200-.55%200a3.3%203.3%200%200%200-1.965.93a3.76%203.76%200%200%200-2.278-.498a3.7%203.7%200%200%200-.942.236c-.003-.047.004-.093%200-.139a3.79%203.79%200%200%200-4.155-3.387a3.77%203.77%200%200%200-2.716%201.619A4.7%204.7%200%200%200%200%2024.672V32c0%20.773.23%201.489.61%202.101C.715%2034.098%2029%2031.209%2029%2029s-1.791-4-4-4%22%2F%3E%3Cpath%20fill%3D%22%23ccd6dd%22%20d%3D%22M32%2036a4%204%200%200%200%204-4v-7.608a7%207%200%200%200-3-.683a7%207%200%200%200-6.475%204.344C26.35%2028.034%2026.18%2028%2026%2028c-.702%200-1.369.147-1.976.409A3.97%203.97%200%200%200%2021%2027a4%204%200%200%200-4%204c0%20.05.013.097.015.146A4%204%200%200%200%2016%2031c-.876%200-1.679.289-2.338.767A3.47%203.47%200%200%200%2011.5%2031a3.3%203.3%200%200%200-.577.059C10.286%2029.279%208.602%2028%206.604%2028c-1.987%200-3.665%201.266-4.31%203.03C2.195%2031.022%202.101%2031%202%2031c-.732%200-1.41.211-2%20.555V32a4%204%200%200%200%204%204z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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