sun behind cloud emoji

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

Name
sun-behind-cloud
Set
Twitter Emoji
Style
Default
Category
Travel & Places
Viewbox
36×36
License
CC BY 4.0

The same emoji in other sets

sun-behind-cloudEmoji One (Colored)sun-behind-cloudFluent Emojisun-behind-cloudFluent Emoji Flatsun-behind-cloudFluent Emoji High Contrastsun-behind-cloudNoto Emojisun-behind-cloudOpenMojisun-behind-cloudStreamline Emojis

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 sun behind cloud emoji

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#ffac33" d="M14 2s0-2 2-2s2 2 2 2v2s0 2-2 2s-2-2-2-2zm16 12s2 0 2 2s-2 2-2 2h-2s-2 0-2-2s2-2 2-2zM4 14s2 0 2 2s-2 2-2 2H2s-2 0-2-2s2-2 2-2zm3.872-7.957s1.414 1.414 0 2.828s-2.828 0-2.828 0L3.629 7.458s-1.414-1.414 0-2.829c1.415-1.414 2.829 0 2.829 0zm19.085 2.828s-1.414 1.414-2.828 0s0-2.828 0-2.828l1.414-1.414s1.414-1.414 2.828 0s0 2.828 0 2.828z"/><circle cx="16" cy="16" r="9" fill="#ffac33"/><path fill="#e1e8ed" d="M28 20c-.825 0-1.62.125-2.369.357A6.5 6.5 0 0 0 19.5 16c-3.044 0-5.592 2.096-6.299 4.921A4.46 4.46 0 0 0 10.5 20A4.5 4.5 0 0 0 6 24.5c0 .604.123 1.178.339 1.704A5 5 0 0 0 5 26c-2.762 0-5 2.238-5 5s2.238 5 5 5h23a8 8 0 1 0 0-16"/></svg>

React

import type { SVGProps } from "react";

export function TwemojiSunBehindCloud(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#ffac33" d="M14 2s0-2 2-2s2 2 2 2v2s0 2-2 2s-2-2-2-2zm16 12s2 0 2 2s-2 2-2 2h-2s-2 0-2-2s2-2 2-2zM4 14s2 0 2 2s-2 2-2 2H2s-2 0-2-2s2-2 2-2zm3.872-7.957s1.414 1.414 0 2.828s-2.828 0-2.828 0L3.629 7.458s-1.414-1.414 0-2.829c1.415-1.414 2.829 0 2.829 0zm19.085 2.828s-1.414 1.414-2.828 0s0-2.828 0-2.828l1.414-1.414s1.414-1.414 2.828 0s0 2.828 0 2.828z"/><circle cx="16" cy="16" r="9" fill="#ffac33"/><path fill="#e1e8ed" d="M28 20c-.825 0-1.62.125-2.369.357A6.5 6.5 0 0 0 19.5 16c-3.044 0-5.592 2.096-6.299 4.921A4.46 4.46 0 0 0 10.5 20A4.5 4.5 0 0 0 6 24.5c0 .604.123 1.178.339 1.704A5 5 0 0 0 5 26c-2.762 0-5 2.238-5 5s2.238 5 5 5h23a8 8 0 1 0 0-16"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#ffac33" d="M14 2s0-2 2-2s2 2 2 2v2s0 2-2 2s-2-2-2-2zm16 12s2 0 2 2s-2 2-2 2h-2s-2 0-2-2s2-2 2-2zM4 14s2 0 2 2s-2 2-2 2H2s-2 0-2-2s2-2 2-2zm3.872-7.957s1.414 1.414 0 2.828s-2.828 0-2.828 0L3.629 7.458s-1.414-1.414 0-2.829c1.415-1.414 2.829 0 2.829 0zm19.085 2.828s-1.414 1.414-2.828 0s0-2.828 0-2.828l1.414-1.414s1.414-1.414 2.828 0s0 2.828 0 2.828z"/><circle cx="16" cy="16" r="9" fill="#ffac33"/><path fill="#e1e8ed" d="M28 20c-.825 0-1.62.125-2.369.357A6.5 6.5 0 0 0 19.5 16c-3.044 0-5.592 2.096-6.299 4.921A4.46 4.46 0 0 0 10.5 20A4.5 4.5 0 0 0 6 24.5c0 .604.123 1.178.339 1.704A5 5 0 0 0 5 26c-2.762 0-5 2.238-5 5s2.238 5 5 5h23a8 8 0 1 0 0-16"/></svg>
</template>

CSS

.icon-sun-behind-cloud {
  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%23ffac33%22%20d%3D%22M14%202s0-2%202-2s2%202%202%202v2s0%202-2%202s-2-2-2-2zm16%2012s2%200%202%202s-2%202-2%202h-2s-2%200-2-2s2-2%202-2zM4%2014s2%200%202%202s-2%202-2%202H2s-2%200-2-2s2-2%202-2zm3.872-7.957s1.414%201.414%200%202.828s-2.828%200-2.828%200L3.629%207.458s-1.414-1.414%200-2.829c1.415-1.414%202.829%200%202.829%200zm19.085%202.828s-1.414%201.414-2.828%200s0-2.828%200-2.828l1.414-1.414s1.414-1.414%202.828%200s0%202.828%200%202.828z%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%229%22%20fill%3D%22%23ffac33%22%2F%3E%3Cpath%20fill%3D%22%23e1e8ed%22%20d%3D%22M28%2020c-.825%200-1.62.125-2.369.357A6.5%206.5%200%200%200%2019.5%2016c-3.044%200-5.592%202.096-6.299%204.921A4.46%204.46%200%200%200%2010.5%2020A4.5%204.5%200%200%200%206%2024.5c0%20.604.123%201.178.339%201.704A5%205%200%200%200%205%2026c-2.762%200-5%202.238-5%205s2.238%205%205%205h23a8%208%200%201%200%200-16%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%23ffac33%22%20d%3D%22M14%202s0-2%202-2s2%202%202%202v2s0%202-2%202s-2-2-2-2zm16%2012s2%200%202%202s-2%202-2%202h-2s-2%200-2-2s2-2%202-2zM4%2014s2%200%202%202s-2%202-2%202H2s-2%200-2-2s2-2%202-2zm3.872-7.957s1.414%201.414%200%202.828s-2.828%200-2.828%200L3.629%207.458s-1.414-1.414%200-2.829c1.415-1.414%202.829%200%202.829%200zm19.085%202.828s-1.414%201.414-2.828%200s0-2.828%200-2.828l1.414-1.414s1.414-1.414%202.828%200s0%202.828%200%202.828z%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%229%22%20fill%3D%22%23ffac33%22%2F%3E%3Cpath%20fill%3D%22%23e1e8ed%22%20d%3D%22M28%2020c-.825%200-1.62.125-2.369.357A6.5%206.5%200%200%200%2019.5%2016c-3.044%200-5.592%202.096-6.299%204.921A4.46%204.46%200%200%200%2010.5%2020A4.5%204.5%200%200%200%206%2024.5c0%20.604.123%201.178.339%201.704A5%205%200%200%200%205%2026c-2.762%200-5%202.238-5%205s2.238%205%205%205h23a8%208%200%201%200%200-16%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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