The Phosphor gender transgender icon visually represents transgender identity and is commonly used in user interfaces to indicate gender options beyond male and female, or to signify gender-affirming spaces.
Common uses
- Gender selection in user profiles
- Accessibility options for gender identity
- Labeling gender-neutral restrooms
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { GenderTransgender } from '@phosphor-icons/react';
<GenderTransgender size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<GenderTransgender size={24} />thin
<GenderTransgender size={24} weight="thin" />light
<GenderTransgender size={24} weight="light" />bold
<GenderTransgender size={24} weight="bold" />fill
<GenderTransgender size={24} weight="fill" />duotone
<GenderTransgender size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- people
- Keywords
- intersexnon-binarypeoplegendertransgendergender identitytransgender symbol
FAQ
- What does the gender transgender icon represent?
- It represents transgender identity, encompassing individuals whose gender identity differs from the sex they were assigned at birth. It's also used for non-binary and intersex individuals.
- How do I use the gender transgender icon in React?
- You can import and use it in React with the following statement: `import { GenderTransgender } from '@phosphor-icons/react'`. Then, render it as a component: `<GenderTransgender />`.
- What is the license for the Phosphor gender transgender icon?
- The Phosphor icon library, including the gender transgender icon, is distributed 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 →