Circle icon
ls:circle
The Circle icon (ls:circle) is a free SVG icon from the Ligature Symbols set by Kazuyuki Motoyama. It is drawn on a 717 × 713 grid. Ligature Symbols icons are released under the Open Font 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
- Ligature Symbols
- Author
- Kazuyuki Motoyama
- License
- OFL-1.1
- Size
- 717 × 713
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="717" height="713" viewBox="0 0 717 713"><path fill="currentColor" d="M441 0c153 0 276 124 276 276c0 143-111 262-251 274c-32 94-121 163-226 163C108 713 0 606 0 474c0-108 71-198 168-229C183 108 300 0 441 0M78 157c-43 0-78-35-78-78S35 1 78 1s77 35 77 78s-34 78-77 78m0-119c-23 0-41 18-41 41s18 41 41 41s41-18 41-41s-18-41-41-41m400 438c95-17 167-101 167-200c0-113-91-204-204-204c-98 0-180 70-198 163c130 1 235 108 235 239zm-75 0v-2c0-90-72-163-162-164c14 84 79 151 162 166M240 637c65 0 119-37 147-91c-111-23-197-110-216-221c-56 26-95 83-95 149c0 91 73 163 164 163"/></svg>
How to use the Circle icon
React
import { Icon } from "@iconify/react";
<Icon icon="ls:circle" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="ls:circle" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="ls:circle" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[ls--circle]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/ls -->
<div class="i-ls:circle"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="ls:circle"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/ls/circle.svg" alt="Circle icon" width="24" height="24">
Circle icon in other icon sets
Circle icon FAQ
Is the Circle icon free for commercial use?
Yes. Ligature Symbols icons are released under the Open Font License, which allows use in personal and commercial projects.
How do I use the Circle icon in React?
Install @iconify/react and render <Icon icon="ls:circle" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Circle icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/ls/circle.svg" alt="Circle icon">, or paste the SVG code inline to style it with CSS.
Browse all Ligature Symbols icons →
ICONYZ
