transgender icon

transgender from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.

Name: transgender
Set: IonIcons
Style: Regular
Viewbox: 512×512
License: MIT

2 other variants in IonIcons

The same icon in other sets

transgenderCarbon transgenderFont Awesome 6 Solid transgenderFont Awesome Solid transgenderHealth Icons transgenderJam Icons transgenderLine Awesome transgenderLucide transgenderMaterial Symbols transgenderMaterial Symbols Light

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="M458 32h-68a22 22 0 0 0 0 44h14.89l-59.57 59.57a149.69 149.69 0 0 0-178.64 0l-7.57-7.57l26.45-26.44a22 22 0 0 0-31.12-31.12L128 96.89L107.11 76H122a22 22 0 0 0 0-44H54a22 22 0 0 0-22 22v68a22 22 0 0 0 44 0v-14.89L96.89 128l-26.42 26.42a22 22 0 1 0 31.11 31.11L128 159.11l7.57 7.57A149.2 149.2 0 0 0 106 256c0 82.71 67.29 150 150 150a149.2 149.2 0 0 0 89.46-29.67L369 399.9l-26.54 26.54a22 22 0 0 0 31.12 31.12l26.49-26.5l42.37 42.48a22 22 0 0 0 31.16-31.08L431.17 400l26.39-26.39a22 22 0 0 0-31.12-31.12l-26.35 26.35l-23.55-23.62a149.68 149.68 0 0 0-.11-178.49L436 107.11V122a22 22 0 0 0 44 0V54a22 22 0 0 0-22-22M150 256a106 106 0 1 1 106 106a106.12 106.12 0 0 1-106-106"/></svg>

React

import type { SVGProps } from "react";

export function IonTransgender(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="M458 32h-68a22 22 0 0 0 0 44h14.89l-59.57 59.57a149.69 149.69 0 0 0-178.64 0l-7.57-7.57l26.45-26.44a22 22 0 0 0-31.12-31.12L128 96.89L107.11 76H122a22 22 0 0 0 0-44H54a22 22 0 0 0-22 22v68a22 22 0 0 0 44 0v-14.89L96.89 128l-26.42 26.42a22 22 0 1 0 31.11 31.11L128 159.11l7.57 7.57A149.2 149.2 0 0 0 106 256c0 82.71 67.29 150 150 150a149.2 149.2 0 0 0 89.46-29.67L369 399.9l-26.54 26.54a22 22 0 0 0 31.12 31.12l26.49-26.5l42.37 42.48a22 22 0 0 0 31.16-31.08L431.17 400l26.39-26.39a22 22 0 0 0-31.12-31.12l-26.35 26.35l-23.55-23.62a149.68 149.68 0 0 0-.11-178.49L436 107.11V122a22 22 0 0 0 44 0V54a22 22 0 0 0-22-22M150 256a106 106 0 1 1 106 106a106.12 106.12 0 0 1-106-106"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M458 32h-68a22 22 0 0 0 0 44h14.89l-59.57 59.57a149.69 149.69 0 0 0-178.64 0l-7.57-7.57l26.45-26.44a22 22 0 0 0-31.12-31.12L128 96.89L107.11 76H122a22 22 0 0 0 0-44H54a22 22 0 0 0-22 22v68a22 22 0 0 0 44 0v-14.89L96.89 128l-26.42 26.42a22 22 0 1 0 31.11 31.11L128 159.11l7.57 7.57A149.2 149.2 0 0 0 106 256c0 82.71 67.29 150 150 150a149.2 149.2 0 0 0 89.46-29.67L369 399.9l-26.54 26.54a22 22 0 0 0 31.12 31.12l26.49-26.5l42.37 42.48a22 22 0 0 0 31.16-31.08L431.17 400l26.39-26.39a22 22 0 0 0-31.12-31.12l-26.35 26.35l-23.55-23.62a149.68 149.68 0 0 0-.11-178.49L436 107.11V122a22 22 0 0 0 44 0V54a22 22 0 0 0-22-22M150 256a106 106 0 1 1 106 106a106.12 106.12 0 0 1-106-106"/></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%22M458%2032h-68a22%2022%200%200%200%200%2044h14.89l-59.57%2059.57a149.69%20149.69%200%200%200-178.64%200l-7.57-7.57l26.45-26.44a22%2022%200%200%200-31.12-31.12L128%2096.89L107.11%2076H122a22%2022%200%200%200%200-44H54a22%2022%200%200%200-22%2022v68a22%2022%200%200%200%2044%200v-14.89L96.89%20128l-26.42%2026.42a22%2022%200%201%200%2031.11%2031.11L128%20159.11l7.57%207.57A149.2%20149.2%200%200%200%20106%20256c0%2082.71%2067.29%20150%20150%20150a149.2%20149.2%200%200%200%2089.46-29.67L369%20399.9l-26.54%2026.54a22%2022%200%200%200%2031.12%2031.12l26.49-26.5l42.37%2042.48a22%2022%200%200%200%2031.16-31.08L431.17%20400l26.39-26.39a22%2022%200%200%200-31.12-31.12l-26.35%2026.35l-23.55-23.62a149.68%20149.68%200%200%200-.11-178.49L436%20107.11V122a22%2022%200%200%200%2044%200V54a22%2022%200%200%200-22-22M150%20256a106%20106%200%201%201%20106%20106a106.12%20106.12%200%200%201-106-106%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%22M458%2032h-68a22%2022%200%200%200%200%2044h14.89l-59.57%2059.57a149.69%20149.69%200%200%200-178.64%200l-7.57-7.57l26.45-26.44a22%2022%200%200%200-31.12-31.12L128%2096.89L107.11%2076H122a22%2022%200%200%200%200-44H54a22%2022%200%200%200-22%2022v68a22%2022%200%200%200%2044%200v-14.89L96.89%20128l-26.42%2026.42a22%2022%200%201%200%2031.11%2031.11L128%20159.11l7.57%207.57A149.2%20149.2%200%200%200%20106%20256c0%2082.71%2067.29%20150%20150%20150a149.2%20149.2%200%200%200%2089.46-29.67L369%20399.9l-26.54%2026.54a22%2022%200%200%200%2031.12%2031.12l26.49-26.5l42.37%2042.48a22%2022%200%200%200%2031.16-31.08L431.17%20400l26.39-26.39a22%2022%200%200%200-31.12-31.12l-26.35%2026.35l-23.55-23.62a149.68%20149.68%200%200%200-.11-178.49L436%20107.11V122a22%2022%200%200%200%2044%200V54a22%2022%200%200%200-22-22M150%20256a106%20106%200%201%201%20106%20106a106.12%20106.12%200%200%201-106-106%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/transgender.svg?color=%231a73e8&size=48