transgender icon
transgender from Font Awesome Solid by Dave Gandy · Solid · Genders · CC-BY-4.0 Attribution required.
- Name
- transgender
- Set
- Font Awesome Solid
- Style
- Solid
- Category
- Genders
- Viewbox
- 640×640
- License
- CC BY 4.0
The same icon in other sets
More genders icons from Font Awesome Solid
Use the transgender icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M160 32c17.7 0 32 14.3 32 32s-14.3 32-32 32h-30.1l38.1 38.1l15-15.1c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-15 15l14.2 14.2c27.9-23.8 64.2-38.2 103.8-38.2c36.7 0 70.6 12.4 97.6 33.2L498.7 96H480c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32s-32-14.3-32-32v-18.7l-84.4 84.4c13 23.1 20.4 49.9 20.4 78.3c0 77.4-55 142-128 156.8V496h32c17.7 0 32 14.3 32 32s-14.3 32-32 32h-32v16c0 17.7-14.3 32-32 32s-32-14.3-32-32v-16h-32c-17.7 0-32-14.3-32-32s14.3-32 32-32h32v-35.2C215 446 160 381.4 160 304c0-31.4 9-60.7 24.7-85.4L168 201.9l-15 15c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l15-15L96 129.9V160c0 17.7-14.3 32-32 32s-32-14.3-32-32V64c0-17.7 14.3-32 32-32zm160 368c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96s43 96 96 96"/></svg>
React
import type { SVGProps } from "react";
export function Fa7SolidTransgender(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M160 32c17.7 0 32 14.3 32 32s-14.3 32-32 32h-30.1l38.1 38.1l15-15.1c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-15 15l14.2 14.2c27.9-23.8 64.2-38.2 103.8-38.2c36.7 0 70.6 12.4 97.6 33.2L498.7 96H480c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32s-32-14.3-32-32v-18.7l-84.4 84.4c13 23.1 20.4 49.9 20.4 78.3c0 77.4-55 142-128 156.8V496h32c17.7 0 32 14.3 32 32s-14.3 32-32 32h-32v16c0 17.7-14.3 32-32 32s-32-14.3-32-32v-16h-32c-17.7 0-32-14.3-32-32s14.3-32 32-32h32v-35.2C215 446 160 381.4 160 304c0-31.4 9-60.7 24.7-85.4L168 201.9l-15 15c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l15-15L96 129.9V160c0 17.7-14.3 32-32 32s-32-14.3-32-32V64c0-17.7 14.3-32 32-32zm160 368c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96s43 96 96 96"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M160 32c17.7 0 32 14.3 32 32s-14.3 32-32 32h-30.1l38.1 38.1l15-15.1c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-15 15l14.2 14.2c27.9-23.8 64.2-38.2 103.8-38.2c36.7 0 70.6 12.4 97.6 33.2L498.7 96H480c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32s-32-14.3-32-32v-18.7l-84.4 84.4c13 23.1 20.4 49.9 20.4 78.3c0 77.4-55 142-128 156.8V496h32c17.7 0 32 14.3 32 32s-14.3 32-32 32h-32v16c0 17.7-14.3 32-32 32s-32-14.3-32-32v-16h-32c-17.7 0-32-14.3-32-32s14.3-32 32-32h32v-35.2C215 446 160 381.4 160 304c0-31.4 9-60.7 24.7-85.4L168 201.9l-15 15c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l15-15L96 129.9V160c0 17.7-14.3 32-32 32s-32-14.3-32-32V64c0-17.7 14.3-32 32-32zm160 368c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96s43 96 96 96"/></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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M160%2032c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032h-30.1l38.1%2038.1l15-15.1c9.4-9.4%2024.6-9.4%2033.9%200s9.4%2024.6%200%2033.9l-15%2015l14.2%2014.2c27.9-23.8%2064.2-38.2%20103.8-38.2c36.7%200%2070.6%2012.4%2097.6%2033.2L498.7%2096H480c-17.7%200-32-14.3-32-32s14.3-32%2032-32h96c17.7%200%2032%2014.3%2032%2032v96c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32v-18.7l-84.4%2084.4c13%2023.1%2020.4%2049.9%2020.4%2078.3c0%2077.4-55%20142-128%20156.8V496h32c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032h-32v16c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32v-16h-32c-17.7%200-32-14.3-32-32s14.3-32%2032-32h32v-35.2C215%20446%20160%20381.4%20160%20304c0-31.4%209-60.7%2024.7-85.4L168%20201.9l-15%2015c-9.4%209.4-24.6%209.4-33.9%200s-9.4-24.6%200-33.9l15-15L96%20129.9V160c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32V64c0-17.7%2014.3-32%2032-32zm160%20368c53%200%2096-43%2096-96s-43-96-96-96s-96%2043-96%2096s43%2096%2096%2096%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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M160%2032c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032h-30.1l38.1%2038.1l15-15.1c9.4-9.4%2024.6-9.4%2033.9%200s9.4%2024.6%200%2033.9l-15%2015l14.2%2014.2c27.9-23.8%2064.2-38.2%20103.8-38.2c36.7%200%2070.6%2012.4%2097.6%2033.2L498.7%2096H480c-17.7%200-32-14.3-32-32s14.3-32%2032-32h96c17.7%200%2032%2014.3%2032%2032v96c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32v-18.7l-84.4%2084.4c13%2023.1%2020.4%2049.9%2020.4%2078.3c0%2077.4-55%20142-128%20156.8V496h32c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032h-32v16c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32v-16h-32c-17.7%200-32-14.3-32-32s14.3-32%2032-32h32v-35.2C215%20446%20160%20381.4%20160%20304c0-31.4%209-60.7%2024.7-85.4L168%20201.9l-15%2015c-9.4%209.4-24.6%209.4-33.9%200s-9.4-24.6%200-33.9l15-15L96%20129.9V160c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32V64c0-17.7%2014.3-32%2032-32zm160%20368c53%200%2096-43%2096-96s-43-96-96-96s-96%2043-96%2096s43%2096%2096%2096%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa7-solid/transgender.svg?color=%231a73e8&size=48
