sunny icon
sunny from IconPark by ByteDance · Color · Weather · Apache-2.0 Free for personal and commercial use.
- Name
- sunny
- Set
- IconPark
- Style
- Color
- Category
- Weather
- Viewbox
- 48×48
- License
- Apache 2.0
The same icon in other sets
More weather icons from IconPark
Use the sunny icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M30.7826 24.5652C34.5285 24.5652 37.5652 21.5285 37.5652 17.7826C37.5652 14.0367 34.5285 11 30.7826 11C27.4338 11 24.6518 13.427 24.0996 16.618"/><path fill="#000" d="M33 7C34.1046 7 35 6.10457 35 5C35 3.89543 34.1046 3 33 3C31.8954 3 31 3.89543 31 5C31 6.10457 31.8954 7 33 7Z"/><path fill="#000" d="M42 12C43.1046 12 44 11.1046 44 10C44 8.89543 43.1046 8 42 8C40.8954 8 40 8.89543 40 10C40 11.1046 40.8954 12 42 12Z"/><path fill="#000" d="M44 21C45.1046 21 46 20.1046 46 19C46 17.8954 45.1046 17 44 17C42.8954 17 42 17.8954 42 19C42 20.1046 42.8954 21 44 21Z"/><path fill="#000" d="M22 10C23.1046 10 24 9.10457 24 8C24 6.89543 23.1046 6 22 6C20.8954 6 20 6.89543 20 8C20 9.10457 20.8954 10 22 10Z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M9.45455 39.9942C6.14242 37.461 4 33.4278 4 28.8851C4 21.2166 10.1052 15 17.6364 15C23.9334 15 29.2336 19.3462 30.8015 25.2533C32.0353 24.6159 33.431 24.2567 34.9091 24.2567C39.9299 24.2567 44 28.4011 44 33.5135C44 37.3094 41.7562 40.5716 38.5455 42"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M22.2426 24.7574C21.1569 23.6716 19.6569 23 18 23C14.6863 23 12 25.6863 12 29C12 30.6569 12.6716 32.1569 13.7574 33.2426"/></g></svg>
React
import type { SVGProps } from "react";
export function IconParkSunny(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M30.7826 24.5652C34.5285 24.5652 37.5652 21.5285 37.5652 17.7826C37.5652 14.0367 34.5285 11 30.7826 11C27.4338 11 24.6518 13.427 24.0996 16.618"/><path fill="#000" d="M33 7C34.1046 7 35 6.10457 35 5C35 3.89543 34.1046 3 33 3C31.8954 3 31 3.89543 31 5C31 6.10457 31.8954 7 33 7Z"/><path fill="#000" d="M42 12C43.1046 12 44 11.1046 44 10C44 8.89543 43.1046 8 42 8C40.8954 8 40 8.89543 40 10C40 11.1046 40.8954 12 42 12Z"/><path fill="#000" d="M44 21C45.1046 21 46 20.1046 46 19C46 17.8954 45.1046 17 44 17C42.8954 17 42 17.8954 42 19C42 20.1046 42.8954 21 44 21Z"/><path fill="#000" d="M22 10C23.1046 10 24 9.10457 24 8C24 6.89543 23.1046 6 22 6C20.8954 6 20 6.89543 20 8C20 9.10457 20.8954 10 22 10Z"/><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M9.45455 39.9942C6.14242 37.461 4 33.4278 4 28.8851C4 21.2166 10.1052 15 17.6364 15C23.9334 15 29.2336 19.3462 30.8015 25.2533C32.0353 24.6159 33.431 24.2567 34.9091 24.2567C39.9299 24.2567 44 28.4011 44 33.5135C44 37.3094 41.7562 40.5716 38.5455 42"/><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M22.2426 24.7574C21.1569 23.6716 19.6569 23 18 23C14.6863 23 12 25.6863 12 29C12 30.6569 12.6716 32.1569 13.7574 33.2426"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M30.7826 24.5652C34.5285 24.5652 37.5652 21.5285 37.5652 17.7826C37.5652 14.0367 34.5285 11 30.7826 11C27.4338 11 24.6518 13.427 24.0996 16.618"/><path fill="#000" d="M33 7C34.1046 7 35 6.10457 35 5C35 3.89543 34.1046 3 33 3C31.8954 3 31 3.89543 31 5C31 6.10457 31.8954 7 33 7Z"/><path fill="#000" d="M42 12C43.1046 12 44 11.1046 44 10C44 8.89543 43.1046 8 42 8C40.8954 8 40 8.89543 40 10C40 11.1046 40.8954 12 42 12Z"/><path fill="#000" d="M44 21C45.1046 21 46 20.1046 46 19C46 17.8954 45.1046 17 44 17C42.8954 17 42 17.8954 42 19C42 20.1046 42.8954 21 44 21Z"/><path fill="#000" d="M22 10C23.1046 10 24 9.10457 24 8C24 6.89543 23.1046 6 22 6C20.8954 6 20 6.89543 20 8C20 9.10457 20.8954 10 22 10Z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M9.45455 39.9942C6.14242 37.461 4 33.4278 4 28.8851C4 21.2166 10.1052 15 17.6364 15C23.9334 15 29.2336 19.3462 30.8015 25.2533C32.0353 24.6159 33.431 24.2567 34.9091 24.2567C39.9299 24.2567 44 28.4011 44 33.5135C44 37.3094 41.7562 40.5716 38.5455 42"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M22.2426 24.7574C21.1569 23.6716 19.6569 23 18 23C14.6863 23 12 25.6863 12 29C12 30.6569 12.6716 32.1569 13.7574 33.2426"/></g></svg> </template>
CSS
.icon-sunny {
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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M30.7826%2024.5652C34.5285%2024.5652%2037.5652%2021.5285%2037.5652%2017.7826C37.5652%2014.0367%2034.5285%2011%2030.7826%2011C27.4338%2011%2024.6518%2013.427%2024.0996%2016.618%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M33%207C34.1046%207%2035%206.10457%2035%205C35%203.89543%2034.1046%203%2033%203C31.8954%203%2031%203.89543%2031%205C31%206.10457%2031.8954%207%2033%207Z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M42%2012C43.1046%2012%2044%2011.1046%2044%2010C44%208.89543%2043.1046%208%2042%208C40.8954%208%2040%208.89543%2040%2010C40%2011.1046%2040.8954%2012%2042%2012Z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M44%2021C45.1046%2021%2046%2020.1046%2046%2019C46%2017.8954%2045.1046%2017%2044%2017C42.8954%2017%2042%2017.8954%2042%2019C42%2020.1046%2042.8954%2021%2044%2021Z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M22%2010C23.1046%2010%2024%209.10457%2024%208C24%206.89543%2023.1046%206%2022%206C20.8954%206%2020%206.89543%2020%208C20%209.10457%2020.8954%2010%2022%2010Z%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M9.45455%2039.9942C6.14242%2037.461%204%2033.4278%204%2028.8851C4%2021.2166%2010.1052%2015%2017.6364%2015C23.9334%2015%2029.2336%2019.3462%2030.8015%2025.2533C32.0353%2024.6159%2033.431%2024.2567%2034.9091%2024.2567C39.9299%2024.2567%2044%2028.4011%2044%2033.5135C44%2037.3094%2041.7562%2040.5716%2038.5455%2042%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M22.2426%2024.7574C21.1569%2023.6716%2019.6569%2023%2018%2023C14.6863%2023%2012%2025.6863%2012%2029C12%2030.6569%2012.6716%2032.1569%2013.7574%2033.2426%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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M30.7826%2024.5652C34.5285%2024.5652%2037.5652%2021.5285%2037.5652%2017.7826C37.5652%2014.0367%2034.5285%2011%2030.7826%2011C27.4338%2011%2024.6518%2013.427%2024.0996%2016.618%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M33%207C34.1046%207%2035%206.10457%2035%205C35%203.89543%2034.1046%203%2033%203C31.8954%203%2031%203.89543%2031%205C31%206.10457%2031.8954%207%2033%207Z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M42%2012C43.1046%2012%2044%2011.1046%2044%2010C44%208.89543%2043.1046%208%2042%208C40.8954%208%2040%208.89543%2040%2010C40%2011.1046%2040.8954%2012%2042%2012Z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M44%2021C45.1046%2021%2046%2020.1046%2046%2019C46%2017.8954%2045.1046%2017%2044%2017C42.8954%2017%2042%2017.8954%2042%2019C42%2020.1046%2042.8954%2021%2044%2021Z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M22%2010C23.1046%2010%2024%209.10457%2024%208C24%206.89543%2023.1046%206%2022%206C20.8954%206%2020%206.89543%2020%208C20%209.10457%2020.8954%2010%2022%2010Z%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M9.45455%2039.9942C6.14242%2037.461%204%2033.4278%204%2028.8851C4%2021.2166%2010.1052%2015%2017.6364%2015C23.9334%2015%2029.2336%2019.3462%2030.8015%2025.2533C32.0353%2024.6159%2033.431%2024.2567%2034.9091%2024.2567C39.9299%2024.2567%2044%2028.4011%2044%2033.5135C44%2037.3094%2041.7562%2040.5716%2038.5455%2042%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M22.2426%2024.7574C21.1569%2023.6716%2019.6569%2023%2018%2023C14.6863%2023%2012%2025.6863%2012%2029C12%2030.6569%2012.6716%2032.1569%2013.7574%2033.2426%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/icon-park/sunny.svg?color=%231a73e8&size=48
