Misaligned Semicircle icon
icon-park:misaligned-semicircle
The Misaligned Semicircle icon (icon-park:misaligned-semicircle) 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
- Abstract
- Tags
- misalignedsemicircle
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="round" stroke-linejoin="round" stroke-width="4"><path d="M20 30C13.3726 30 8 24.6274 8 18C8 11.3726 13.3726 6 20 6"/><path d="M20 22C17.7909 22 16 20.2091 16 18C16 15.7909 17.7909 14 20 14"/><path d="M28 34C30.2091 34 32 32.2091 32 30C32 27.7909 30.2091 26 28 26"/><path d="M28 42C34.6274 42 40 36.6274 40 30C40 23.3726 34.6274 18 28 18"/></g></svg>How to use the Misaligned Semicircle icon
React
import { Icon } from "@iconify/react";
<Icon icon="icon-park:misaligned-semicircle" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="icon-park:misaligned-semicircle" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="icon-park:misaligned-semicircle" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[icon-park--misaligned-semicircle]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/icon-park -->
<div class="i-icon-park:misaligned-semicircle"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="icon-park:misaligned-semicircle"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/icon-park/misaligned-semicircle.svg" alt="Misaligned Semicircle icon" width="24" height="24">Misaligned Semicircle icon in other icon sets
Misaligned Semicircle icon FAQ
Is the Misaligned Semicircle 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 Misaligned Semicircle icon in React?
Install @iconify/react and render <Icon icon="icon-park:misaligned-semicircle" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Misaligned Semicircle icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/icon-park/misaligned-semicircle.svg" alt="Misaligned Semicircle icon">, or paste the SVG code inline to style it with CSS.