period icon
period from IconPark by ByteDance · Color · Health · Apache-2.0 Free for personal and commercial use.
- Name
- period
- Set
- IconPark
- Style
- Color
- Category
- Health
- Viewbox
- 48×48
- License
- Apache 2.0
The same icon in other sets
More health icons from IconPark
Use the period icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke="#000" stroke-linecap="square" stroke-width="4"><path d="M7.99956 4C12.0022 7.33659 14.0034 10.6715 14.0034 14.0046C14.0034 19.0043 9.99956 21.2436 7.99956 24C5.99956 26.7564 5.00488 29.9311 5.00488 34.0033C5.00488 36.718 6.00311 40.0503 7.99956 44"/><path d="M40.0034 4C36.0008 7.33659 33.9995 10.6715 33.9995 14.0046C33.9995 19.0043 38.0034 21.2436 40.0034 24C42.0034 26.7564 42.998 29.9311 42.998 34.0033C42.998 36.718 41.9998 40.0503 40.0034 44"/><path d="M14.0039 29.1826C16.5255 28.941 18.6192 29.3014 20.2853 30.2639C22.7843 31.7076 23.9917 33.3597 24 34.9573C24.0056 36.0224 24.0056 39.0367 24 44.0001"/><path d="M34.0039 29.1826C31.4824 28.941 29.3886 29.3014 27.7226 30.2639C25.2235 31.7076 24.0161 33.3597 24.0078 34.9573"/></g></svg>
React
import type { SVGProps } from "react";
export function IconParkPeriod(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" stroke="#000" strokeLinecap="square" strokeWidth="4"><path d="M7.99956 4C12.0022 7.33659 14.0034 10.6715 14.0034 14.0046C14.0034 19.0043 9.99956 21.2436 7.99956 24C5.99956 26.7564 5.00488 29.9311 5.00488 34.0033C5.00488 36.718 6.00311 40.0503 7.99956 44"/><path d="M40.0034 4C36.0008 7.33659 33.9995 10.6715 33.9995 14.0046C33.9995 19.0043 38.0034 21.2436 40.0034 24C42.0034 26.7564 42.998 29.9311 42.998 34.0033C42.998 36.718 41.9998 40.0503 40.0034 44"/><path d="M14.0039 29.1826C16.5255 28.941 18.6192 29.3014 20.2853 30.2639C22.7843 31.7076 23.9917 33.3597 24 34.9573C24.0056 36.0224 24.0056 39.0367 24 44.0001"/><path d="M34.0039 29.1826C31.4824 28.941 29.3886 29.3014 27.7226 30.2639C25.2235 31.7076 24.0161 33.3597 24.0078 34.9573"/></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="#000" stroke-linecap="square" stroke-width="4"><path d="M7.99956 4C12.0022 7.33659 14.0034 10.6715 14.0034 14.0046C14.0034 19.0043 9.99956 21.2436 7.99956 24C5.99956 26.7564 5.00488 29.9311 5.00488 34.0033C5.00488 36.718 6.00311 40.0503 7.99956 44"/><path d="M40.0034 4C36.0008 7.33659 33.9995 10.6715 33.9995 14.0046C33.9995 19.0043 38.0034 21.2436 40.0034 24C42.0034 26.7564 42.998 29.9311 42.998 34.0033C42.998 36.718 41.9998 40.0503 40.0034 44"/><path d="M14.0039 29.1826C16.5255 28.941 18.6192 29.3014 20.2853 30.2639C22.7843 31.7076 23.9917 33.3597 24 34.9573C24.0056 36.0224 24.0056 39.0367 24 44.0001"/><path d="M34.0039 29.1826C31.4824 28.941 29.3886 29.3014 27.7226 30.2639C25.2235 31.7076 24.0161 33.3597 24.0078 34.9573"/></g></svg> </template>
CSS
.icon-period {
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%3D%22%23000%22%20stroke-linecap%3D%22square%22%20stroke-width%3D%224%22%3E%3Cpath%20d%3D%22M7.99956%204C12.0022%207.33659%2014.0034%2010.6715%2014.0034%2014.0046C14.0034%2019.0043%209.99956%2021.2436%207.99956%2024C5.99956%2026.7564%205.00488%2029.9311%205.00488%2034.0033C5.00488%2036.718%206.00311%2040.0503%207.99956%2044%22%2F%3E%3Cpath%20d%3D%22M40.0034%204C36.0008%207.33659%2033.9995%2010.6715%2033.9995%2014.0046C33.9995%2019.0043%2038.0034%2021.2436%2040.0034%2024C42.0034%2026.7564%2042.998%2029.9311%2042.998%2034.0033C42.998%2036.718%2041.9998%2040.0503%2040.0034%2044%22%2F%3E%3Cpath%20d%3D%22M14.0039%2029.1826C16.5255%2028.941%2018.6192%2029.3014%2020.2853%2030.2639C22.7843%2031.7076%2023.9917%2033.3597%2024%2034.9573C24.0056%2036.0224%2024.0056%2039.0367%2024%2044.0001%22%2F%3E%3Cpath%20d%3D%22M34.0039%2029.1826C31.4824%2028.941%2029.3886%2029.3014%2027.7226%2030.2639C25.2235%2031.7076%2024.0161%2033.3597%2024.0078%2034.9573%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%3D%22%23000%22%20stroke-linecap%3D%22square%22%20stroke-width%3D%224%22%3E%3Cpath%20d%3D%22M7.99956%204C12.0022%207.33659%2014.0034%2010.6715%2014.0034%2014.0046C14.0034%2019.0043%209.99956%2021.2436%207.99956%2024C5.99956%2026.7564%205.00488%2029.9311%205.00488%2034.0033C5.00488%2036.718%206.00311%2040.0503%207.99956%2044%22%2F%3E%3Cpath%20d%3D%22M40.0034%204C36.0008%207.33659%2033.9995%2010.6715%2033.9995%2014.0046C33.9995%2019.0043%2038.0034%2021.2436%2040.0034%2024C42.0034%2026.7564%2042.998%2029.9311%2042.998%2034.0033C42.998%2036.718%2041.9998%2040.0503%2040.0034%2044%22%2F%3E%3Cpath%20d%3D%22M14.0039%2029.1826C16.5255%2028.941%2018.6192%2029.3014%2020.2853%2030.2639C22.7843%2031.7076%2023.9917%2033.3597%2024%2034.9573C24.0056%2036.0224%2024.0056%2039.0367%2024%2044.0001%22%2F%3E%3Cpath%20d%3D%22M34.0039%2029.1826C31.4824%2028.941%2029.3886%2029.3014%2027.7226%2030.2639C25.2235%2031.7076%2024.0161%2033.3597%2024.0078%2034.9573%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/period.svg?color=%231a73e8&size=48
