The Phosphor yin yang icon depicts the ancient Chinese symbol representing balance and duality, often used in UI to signify harmony, opposing forces, or a philosophical concept.
Common uses
- Representing balance in a settings panel.
- Illustrating duality in a philosophical or spiritual app.
- As a decorative element for a wellness or meditation service.
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { YinYang } from '@phosphor-icons/react';
<YinYang size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<YinYang size={24} />thin
<YinYang size={24} weight="thin" />light
<YinYang size={24} weight="light" />bold
<YinYang size={24} weight="bold" />fill
<YinYang size={24} weight="fill" />duotone
<YinYang size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- communications
- Keywords
- symbolgoodevilblackwhitecommunicationsyinyangbalance symbolduality icontao symbol
FAQ
- What does the yin yang icon represent?
- It represents the ancient Chinese concept of dualism, where seemingly opposite or contrary forces are actually complementary, interconnected, and interdependent in the natural world.
- How do I use the yin yang icon in React?
- You can import and use it in your React components like this: import { YinYang } from '@phosphor-icons/react'.
- What is the license for the Phosphor yin yang icon?
- The Phosphor icon library, including the yin yang icon, is available under the MIT license.
Related icons
The same idea in other libraries, and near matches in Phosphor.
Looking for something else? Search Phosphor and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →