shade icon
shade from IconPark by ByteDance · Color · Travel · Apache-2.0 Free for personal and commercial use.
- Name
- shade
- Set
- IconPark
- Style
- Color
- Category
- Travel
- Viewbox
- 48×48
- License
- Apache 2.0
The same icon in other sets
More travel icons from IconPark
Use the shade icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path fill="#2F88FF" stroke="#000" d="M24 6C14.0589 6 6 14.034 6 23.9444V26C6 23.5224 8.01472 21 10.5 21C12.9853 21 15 23.5224 15 26C15 23.5224 17.0147 21 19.5 21C21.9853 21 24 23.5224 24 26C24 23.5224 26.0147 21 28.5 21C30.9853 21 33 23.5224 33 26C33 23.5224 35.0147 21 37.5 21C39.9853 21 42 23.5224 42 26V23.9444C42 14.034 33.9411 6 24 6Z"/><path stroke="#fff" d="M15.0003 26C15.0003 26 13.4999 20.5 16.0005 15C18.5011 9.49998 24.0002 5.99999 24.0002 5.99999"/><path stroke="#fff" d="M33.0002 26C33.0002 26 33.5006 21.5 31.0003 15C28.5 8.5 24.0002 5.99999 24.0002 5.99999"/><path stroke="#000" d="M24 25V39.5C24 41.9853 21.9853 44 19.5 44V44C17.0147 44 15 41.9853 15 39.5V38.1818"/><path stroke="#fff" d="M24 25V6"/><path stroke="#000" d="M24 6V4"/><path stroke="#000" d="M28.5 21C30.9853 21 33 23.5224 33 26C33 23.5224 35.0147 21 37.5 21"/><path stroke="#000" d="M28.5 21C26.0147 21 24 23.5224 24 26C24 23.5224 21.9853 21 19.5 21"/><path stroke="#000" d="M10.5 21C12.9853 21 15 23.5224 15 26C15 23.5224 17.0147 21 19.5 21"/><path stroke="#000" d="M15.7334 8C18.2088 6.72196 21.0197 6 23.9998 6C26.9798 6 29.7908 6.72196 32.2661 8"/></g></svg>
React
import type { SVGProps } from "react";
export function IconParkShade(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" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4"><path fill="#2F88FF" stroke="#000" d="M24 6C14.0589 6 6 14.034 6 23.9444V26C6 23.5224 8.01472 21 10.5 21C12.9853 21 15 23.5224 15 26C15 23.5224 17.0147 21 19.5 21C21.9853 21 24 23.5224 24 26C24 23.5224 26.0147 21 28.5 21C30.9853 21 33 23.5224 33 26C33 23.5224 35.0147 21 37.5 21C39.9853 21 42 23.5224 42 26V23.9444C42 14.034 33.9411 6 24 6Z"/><path stroke="#fff" d="M15.0003 26C15.0003 26 13.4999 20.5 16.0005 15C18.5011 9.49998 24.0002 5.99999 24.0002 5.99999"/><path stroke="#fff" d="M33.0002 26C33.0002 26 33.5006 21.5 31.0003 15C28.5 8.5 24.0002 5.99999 24.0002 5.99999"/><path stroke="#000" d="M24 25V39.5C24 41.9853 21.9853 44 19.5 44V44C17.0147 44 15 41.9853 15 39.5V38.1818"/><path stroke="#fff" d="M24 25V6"/><path stroke="#000" d="M24 6V4"/><path stroke="#000" d="M28.5 21C30.9853 21 33 23.5224 33 26C33 23.5224 35.0147 21 37.5 21"/><path stroke="#000" d="M28.5 21C26.0147 21 24 23.5224 24 26C24 23.5224 21.9853 21 19.5 21"/><path stroke="#000" d="M10.5 21C12.9853 21 15 23.5224 15 26C15 23.5224 17.0147 21 19.5 21"/><path stroke="#000" d="M15.7334 8C18.2088 6.72196 21.0197 6 23.9998 6C26.9798 6 29.7908 6.72196 32.2661 8"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path fill="#2F88FF" stroke="#000" d="M24 6C14.0589 6 6 14.034 6 23.9444V26C6 23.5224 8.01472 21 10.5 21C12.9853 21 15 23.5224 15 26C15 23.5224 17.0147 21 19.5 21C21.9853 21 24 23.5224 24 26C24 23.5224 26.0147 21 28.5 21C30.9853 21 33 23.5224 33 26C33 23.5224 35.0147 21 37.5 21C39.9853 21 42 23.5224 42 26V23.9444C42 14.034 33.9411 6 24 6Z"/><path stroke="#fff" d="M15.0003 26C15.0003 26 13.4999 20.5 16.0005 15C18.5011 9.49998 24.0002 5.99999 24.0002 5.99999"/><path stroke="#fff" d="M33.0002 26C33.0002 26 33.5006 21.5 31.0003 15C28.5 8.5 24.0002 5.99999 24.0002 5.99999"/><path stroke="#000" d="M24 25V39.5C24 41.9853 21.9853 44 19.5 44V44C17.0147 44 15 41.9853 15 39.5V38.1818"/><path stroke="#fff" d="M24 25V6"/><path stroke="#000" d="M24 6V4"/><path stroke="#000" d="M28.5 21C30.9853 21 33 23.5224 33 26C33 23.5224 35.0147 21 37.5 21"/><path stroke="#000" d="M28.5 21C26.0147 21 24 23.5224 24 26C24 23.5224 21.9853 21 19.5 21"/><path stroke="#000" d="M10.5 21C12.9853 21 15 23.5224 15 26C15 23.5224 17.0147 21 19.5 21"/><path stroke="#000" d="M15.7334 8C18.2088 6.72196 21.0197 6 23.9998 6C26.9798 6 29.7908 6.72196 32.2661 8"/></g></svg> </template>
CSS
.icon-shade {
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%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20d%3D%22M24%206C14.0589%206%206%2014.034%206%2023.9444V26C6%2023.5224%208.01472%2021%2010.5%2021C12.9853%2021%2015%2023.5224%2015%2026C15%2023.5224%2017.0147%2021%2019.5%2021C21.9853%2021%2024%2023.5224%2024%2026C24%2023.5224%2026.0147%2021%2028.5%2021C30.9853%2021%2033%2023.5224%2033%2026C33%2023.5224%2035.0147%2021%2037.5%2021C39.9853%2021%2042%2023.5224%2042%2026V23.9444C42%2014.034%2033.9411%206%2024%206Z%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20d%3D%22M15.0003%2026C15.0003%2026%2013.4999%2020.5%2016.0005%2015C18.5011%209.49998%2024.0002%205.99999%2024.0002%205.99999%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20d%3D%22M33.0002%2026C33.0002%2026%2033.5006%2021.5%2031.0003%2015C28.5%208.5%2024.0002%205.99999%2024.0002%205.99999%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20d%3D%22M24%2025V39.5C24%2041.9853%2021.9853%2044%2019.5%2044V44C17.0147%2044%2015%2041.9853%2015%2039.5V38.1818%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20d%3D%22M24%2025V6%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20d%3D%22M24%206V4%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20d%3D%22M28.5%2021C30.9853%2021%2033%2023.5224%2033%2026C33%2023.5224%2035.0147%2021%2037.5%2021%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20d%3D%22M28.5%2021C26.0147%2021%2024%2023.5224%2024%2026C24%2023.5224%2021.9853%2021%2019.5%2021%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20d%3D%22M10.5%2021C12.9853%2021%2015%2023.5224%2015%2026C15%2023.5224%2017.0147%2021%2019.5%2021%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20d%3D%22M15.7334%208C18.2088%206.72196%2021.0197%206%2023.9998%206C26.9798%206%2029.7908%206.72196%2032.2661%208%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%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20d%3D%22M24%206C14.0589%206%206%2014.034%206%2023.9444V26C6%2023.5224%208.01472%2021%2010.5%2021C12.9853%2021%2015%2023.5224%2015%2026C15%2023.5224%2017.0147%2021%2019.5%2021C21.9853%2021%2024%2023.5224%2024%2026C24%2023.5224%2026.0147%2021%2028.5%2021C30.9853%2021%2033%2023.5224%2033%2026C33%2023.5224%2035.0147%2021%2037.5%2021C39.9853%2021%2042%2023.5224%2042%2026V23.9444C42%2014.034%2033.9411%206%2024%206Z%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20d%3D%22M15.0003%2026C15.0003%2026%2013.4999%2020.5%2016.0005%2015C18.5011%209.49998%2024.0002%205.99999%2024.0002%205.99999%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20d%3D%22M33.0002%2026C33.0002%2026%2033.5006%2021.5%2031.0003%2015C28.5%208.5%2024.0002%205.99999%2024.0002%205.99999%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20d%3D%22M24%2025V39.5C24%2041.9853%2021.9853%2044%2019.5%2044V44C17.0147%2044%2015%2041.9853%2015%2039.5V38.1818%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20d%3D%22M24%2025V6%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20d%3D%22M24%206V4%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20d%3D%22M28.5%2021C30.9853%2021%2033%2023.5224%2033%2026C33%2023.5224%2035.0147%2021%2037.5%2021%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20d%3D%22M28.5%2021C26.0147%2021%2024%2023.5224%2024%2026C24%2023.5224%2021.9853%2021%2019.5%2021%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20d%3D%22M10.5%2021C12.9853%2021%2015%2023.5224%2015%2026C15%2023.5224%2017.0147%2021%2019.5%2021%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20d%3D%22M15.7334%208C18.2088%206.72196%2021.0197%206%2023.9998%206C26.9798%206%2029.7908%206.72196%2032.2661%208%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/shade.svg?color=%231a73e8&size=48
