Period icon
icon-park:period
The Period icon (icon-park:period) is a free SVG icon from the IconPark set by ByteDance. It is drawn on a 48 × 48 grid. IconPark icons are released under the Apache 2.0 license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- IconPark
- Author
- ByteDance
- License
- Apache-2.0
- Size
- 48 × 48
- Category
- Health
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" 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>How to use the Period icon
React
import { Icon } from "@iconify/react";
<Icon icon="icon-park:period" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="icon-park:period" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="icon-park:period" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[icon-park--period]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/icon-park -->
<div class="i-icon-park:period"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="icon-park:period"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/icon-park/period.svg" alt="Period icon" width="24" height="24">Period icon in other icon sets
Period icon FAQ
Is the Period icon free for commercial use?
Yes. IconPark icons are released under the Apache 2.0 license, which allows use in personal and commercial projects.
How do I use the Period icon in React?
Install @iconify/react and render <Icon icon="icon-park:period" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Period icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/icon-park/period.svg" alt="Period icon">, or paste the SVG code inline to style it with CSS.