yin yang icon
yin-yang from Line Awesome by Icons8 · Line · Spinners · Apache-2.0 Free for personal and commercial use.
- Name
- yin-yang
- Set
- Line Awesome
- Style
- Line
- Category
- Spinners
- Viewbox
- 32×32
- License
- Apache 2.0
- Aliases
- yin-yang-solid
The same icon in other sets
yin-yangBootstrap Iconsyin-yangBoxIcons v2 Solidyin-yangEmoji One (Colored)yin-yangFont Awesome 6 Solidyin-yangFont Awesome Solidyin-yangFluent Emojiyin-yangFluent Emoji Flatyin-yangFluent Emoji High Contrastyin-yangLucide Labyin-yangMaterial Design Iconsyin-yangNoto Emojiyin-yangOpenMojiyin-yangPhosphoryin-yangTabler Iconsyin-yangTwitter Emojiyin-yangUnicons
More spinners icons from Line Awesome
Use the yin yang icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 4C9.383 4 4 9.383 4 16s5.383 12 12 12h.25c.086.004.164 0 .25 0v-.031C22.883 27.703 28 22.445 28 16c0-5.875-4.258-10.758-9.844-11.781A6.4 6.4 0 0 0 16.5 4v.031C16.332 4.023 16.168 4 16 4m0 2c.348 0 .695.027 1.031.063c.125.015.254.007.375.03c.032.005.063.028.094.032A4.47 4.47 0 0 1 21 10.5c0 2.496-2.004 4.5-4.5 4.5c-3.578 0-6.5 2.922-6.5 6.5c0 1.07.258 2.078.719 2.969C7.887 22.707 6 19.589 6 16c0-5.535 4.465-10 10-10m6.719 2.625C24.727 10.453 26 13.063 26 16c0 5.43-4.3 9.805-9.688 9.969C13.906 25.867 12 23.934 12 21.5c0-2.496 2.004-4.5 4.5-4.5c3.578 0 6.5-2.922 6.5-6.5a6.5 6.5 0 0 0-.281-1.875M16.5 9a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m0 11a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3"/></svg>
React
import type { SVGProps } from "react";
export function LaYinYang(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 4C9.383 4 4 9.383 4 16s5.383 12 12 12h.25c.086.004.164 0 .25 0v-.031C22.883 27.703 28 22.445 28 16c0-5.875-4.258-10.758-9.844-11.781A6.4 6.4 0 0 0 16.5 4v.031C16.332 4.023 16.168 4 16 4m0 2c.348 0 .695.027 1.031.063c.125.015.254.007.375.03c.032.005.063.028.094.032A4.47 4.47 0 0 1 21 10.5c0 2.496-2.004 4.5-4.5 4.5c-3.578 0-6.5 2.922-6.5 6.5c0 1.07.258 2.078.719 2.969C7.887 22.707 6 19.589 6 16c0-5.535 4.465-10 10-10m6.719 2.625C24.727 10.453 26 13.063 26 16c0 5.43-4.3 9.805-9.688 9.969C13.906 25.867 12 23.934 12 21.5c0-2.496 2.004-4.5 4.5-4.5c3.578 0 6.5-2.922 6.5-6.5a6.5 6.5 0 0 0-.281-1.875M16.5 9a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m0 11a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 4C9.383 4 4 9.383 4 16s5.383 12 12 12h.25c.086.004.164 0 .25 0v-.031C22.883 27.703 28 22.445 28 16c0-5.875-4.258-10.758-9.844-11.781A6.4 6.4 0 0 0 16.5 4v.031C16.332 4.023 16.168 4 16 4m0 2c.348 0 .695.027 1.031.063c.125.015.254.007.375.03c.032.005.063.028.094.032A4.47 4.47 0 0 1 21 10.5c0 2.496-2.004 4.5-4.5 4.5c-3.578 0-6.5 2.922-6.5 6.5c0 1.07.258 2.078.719 2.969C7.887 22.707 6 19.589 6 16c0-5.535 4.465-10 10-10m6.719 2.625C24.727 10.453 26 13.063 26 16c0 5.43-4.3 9.805-9.688 9.969C13.906 25.867 12 23.934 12 21.5c0-2.496 2.004-4.5 4.5-4.5c3.578 0 6.5-2.922 6.5-6.5a6.5 6.5 0 0 0-.281-1.875M16.5 9a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m0 11a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3"/></svg> </template>
CSS
.icon-yin-yang {
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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16%204C9.383%204%204%209.383%204%2016s5.383%2012%2012%2012h.25c.086.004.164%200%20.25%200v-.031C22.883%2027.703%2028%2022.445%2028%2016c0-5.875-4.258-10.758-9.844-11.781A6.4%206.4%200%200%200%2016.5%204v.031C16.332%204.023%2016.168%204%2016%204m0%202c.348%200%20.695.027%201.031.063c.125.015.254.007.375.03c.032.005.063.028.094.032A4.47%204.47%200%200%201%2021%2010.5c0%202.496-2.004%204.5-4.5%204.5c-3.578%200-6.5%202.922-6.5%206.5c0%201.07.258%202.078.719%202.969C7.887%2022.707%206%2019.589%206%2016c0-5.535%204.465-10%2010-10m6.719%202.625C24.727%2010.453%2026%2013.063%2026%2016c0%205.43-4.3%209.805-9.688%209.969C13.906%2025.867%2012%2023.934%2012%2021.5c0-2.496%202.004-4.5%204.5-4.5c3.578%200%206.5-2.922%206.5-6.5a6.5%206.5%200%200%200-.281-1.875M16.5%209a1.5%201.5%200%201%200%200%203a1.5%201.5%200%200%200%200-3m0%2011a1.5%201.5%200%201%200%200%203a1.5%201.5%200%200%200%200-3%22%2F%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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16%204C9.383%204%204%209.383%204%2016s5.383%2012%2012%2012h.25c.086.004.164%200%20.25%200v-.031C22.883%2027.703%2028%2022.445%2028%2016c0-5.875-4.258-10.758-9.844-11.781A6.4%206.4%200%200%200%2016.5%204v.031C16.332%204.023%2016.168%204%2016%204m0%202c.348%200%20.695.027%201.031.063c.125.015.254.007.375.03c.032.005.063.028.094.032A4.47%204.47%200%200%201%2021%2010.5c0%202.496-2.004%204.5-4.5%204.5c-3.578%200-6.5%202.922-6.5%206.5c0%201.07.258%202.078.719%202.969C7.887%2022.707%206%2019.589%206%2016c0-5.535%204.465-10%2010-10m6.719%202.625C24.727%2010.453%2026%2013.063%2026%2016c0%205.43-4.3%209.805-9.688%209.969C13.906%2025.867%2012%2023.934%2012%2021.5c0-2.496%202.004-4.5%204.5-4.5c3.578%200%206.5-2.922%206.5-6.5a6.5%206.5%200%200%200-.281-1.875M16.5%209a1.5%201.5%200%201%200%200%203a1.5%201.5%200%200%200%200-3m0%2011a1.5%201.5%200%201%200%200%203a1.5%201.5%200%200%200%200-3%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/la/yin-yang.svg?color=%231a73e8&size=48
