transgender icon
transgender from Font Awesome 6 Solid by Dave Gandy · Regular · Genders · CC-BY-4.0 Attribution required.
- Name
- transgender
- Set
- Font Awesome 6 Solid
- Style
- Regular
- Category
- Genders
- Viewbox
- 512×512
- License
- CC BY 4.0
The same icon in other sets
More genders icons from Font Awesome 6 Solid
Use the transgender icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M112 0c6.5 0 12.3 3.9 14.8 9.9s1.1 12.9-3.5 17.4l-31 31L112 78.1l7-7c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-7 7l15.2 15.2C187.7 107.6 220.5 96 256 96s68.3 11.6 94.9 31.2l68.8-68.8l-31-31c-4.6-4.6-5.9-11.5-3.5-17.4S393.5.1 400 .1h96c8.8 0 16 7.2 16 16v96c0 6.5-3.9 12.3-9.9 14.8s-12.9 1.1-17.4-3.5l-31-31l-68.8 68.8c19.5 26.5 31.1 59.3 31.1 94.8c0 80.2-59 146.6-136 158.2V432h16c13.3 0 24 10.7 24 24s-10.7 24-24 24h-16v8c0 13.3-10.7 24-24 24s-24-10.7-24-24v-8h-16c-13.3 0-24-10.7-24-24s10.7-24 24-24h16v-17.8c-77-11.6-136-78-136-158.2c0-35.5 11.6-68.3 31.2-94.9L112 145.9l-7 7c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l7-7l-19.8-19.7l-31 31c-4.6 4.6-11.5 5.9-17.4 3.5S0 118.5 0 112V16C0 7.2 7.2 0 16 0zm240 256a96 96 0 1 0-192 0a96 96 0 1 0 192 0"/></svg>
React
import type { SVGProps } from "react";
export function Fa6SolidTransgender(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M112 0c6.5 0 12.3 3.9 14.8 9.9s1.1 12.9-3.5 17.4l-31 31L112 78.1l7-7c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-7 7l15.2 15.2C187.7 107.6 220.5 96 256 96s68.3 11.6 94.9 31.2l68.8-68.8l-31-31c-4.6-4.6-5.9-11.5-3.5-17.4S393.5.1 400 .1h96c8.8 0 16 7.2 16 16v96c0 6.5-3.9 12.3-9.9 14.8s-12.9 1.1-17.4-3.5l-31-31l-68.8 68.8c19.5 26.5 31.1 59.3 31.1 94.8c0 80.2-59 146.6-136 158.2V432h16c13.3 0 24 10.7 24 24s-10.7 24-24 24h-16v8c0 13.3-10.7 24-24 24s-24-10.7-24-24v-8h-16c-13.3 0-24-10.7-24-24s10.7-24 24-24h16v-17.8c-77-11.6-136-78-136-158.2c0-35.5 11.6-68.3 31.2-94.9L112 145.9l-7 7c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l7-7l-19.8-19.7l-31 31c-4.6 4.6-11.5 5.9-17.4 3.5S0 118.5 0 112V16C0 7.2 7.2 0 16 0zm240 256a96 96 0 1 0-192 0a96 96 0 1 0 192 0"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M112 0c6.5 0 12.3 3.9 14.8 9.9s1.1 12.9-3.5 17.4l-31 31L112 78.1l7-7c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-7 7l15.2 15.2C187.7 107.6 220.5 96 256 96s68.3 11.6 94.9 31.2l68.8-68.8l-31-31c-4.6-4.6-5.9-11.5-3.5-17.4S393.5.1 400 .1h96c8.8 0 16 7.2 16 16v96c0 6.5-3.9 12.3-9.9 14.8s-12.9 1.1-17.4-3.5l-31-31l-68.8 68.8c19.5 26.5 31.1 59.3 31.1 94.8c0 80.2-59 146.6-136 158.2V432h16c13.3 0 24 10.7 24 24s-10.7 24-24 24h-16v8c0 13.3-10.7 24-24 24s-24-10.7-24-24v-8h-16c-13.3 0-24-10.7-24-24s10.7-24 24-24h16v-17.8c-77-11.6-136-78-136-158.2c0-35.5 11.6-68.3 31.2-94.9L112 145.9l-7 7c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l7-7l-19.8-19.7l-31 31c-4.6 4.6-11.5 5.9-17.4 3.5S0 118.5 0 112V16C0 7.2 7.2 0 16 0zm240 256a96 96 0 1 0-192 0a96 96 0 1 0 192 0"/></svg> </template>
CSS
.icon-transgender {
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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M112%200c6.5%200%2012.3%203.9%2014.8%209.9s1.1%2012.9-3.5%2017.4l-31%2031L112%2078.1l7-7c9.4-9.4%2024.6-9.4%2033.9%200s9.4%2024.6%200%2033.9l-7%207l15.2%2015.2C187.7%20107.6%20220.5%2096%20256%2096s68.3%2011.6%2094.9%2031.2l68.8-68.8l-31-31c-4.6-4.6-5.9-11.5-3.5-17.4S393.5.1%20400%20.1h96c8.8%200%2016%207.2%2016%2016v96c0%206.5-3.9%2012.3-9.9%2014.8s-12.9%201.1-17.4-3.5l-31-31l-68.8%2068.8c19.5%2026.5%2031.1%2059.3%2031.1%2094.8c0%2080.2-59%20146.6-136%20158.2V432h16c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024h-16v8c0%2013.3-10.7%2024-24%2024s-24-10.7-24-24v-8h-16c-13.3%200-24-10.7-24-24s10.7-24%2024-24h16v-17.8c-77-11.6-136-78-136-158.2c0-35.5%2011.6-68.3%2031.2-94.9L112%20145.9l-7%207c-9.4%209.4-24.6%209.4-33.9%200s-9.4-24.6%200-33.9l7-7l-19.8-19.7l-31%2031c-4.6%204.6-11.5%205.9-17.4%203.5S0%20118.5%200%20112V16C0%207.2%207.2%200%2016%200zm240%20256a96%2096%200%201%200-192%200a96%2096%200%201%200%20192%200%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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M112%200c6.5%200%2012.3%203.9%2014.8%209.9s1.1%2012.9-3.5%2017.4l-31%2031L112%2078.1l7-7c9.4-9.4%2024.6-9.4%2033.9%200s9.4%2024.6%200%2033.9l-7%207l15.2%2015.2C187.7%20107.6%20220.5%2096%20256%2096s68.3%2011.6%2094.9%2031.2l68.8-68.8l-31-31c-4.6-4.6-5.9-11.5-3.5-17.4S393.5.1%20400%20.1h96c8.8%200%2016%207.2%2016%2016v96c0%206.5-3.9%2012.3-9.9%2014.8s-12.9%201.1-17.4-3.5l-31-31l-68.8%2068.8c19.5%2026.5%2031.1%2059.3%2031.1%2094.8c0%2080.2-59%20146.6-136%20158.2V432h16c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024h-16v8c0%2013.3-10.7%2024-24%2024s-24-10.7-24-24v-8h-16c-13.3%200-24-10.7-24-24s10.7-24%2024-24h16v-17.8c-77-11.6-136-78-136-158.2c0-35.5%2011.6-68.3%2031.2-94.9L112%20145.9l-7%207c-9.4%209.4-24.6%209.4-33.9%200s-9.4-24.6%200-33.9l7-7l-19.8-19.7l-31%2031c-4.6%204.6-11.5%205.9-17.4%203.5S0%20118.5%200%20112V16C0%207.2%207.2%200%2016%200zm240%20256a96%2096%200%201%200-192%200a96%2096%200%201%200%20192%200%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa6-solid/transgender.svg?color=%231a73e8&size=48
