flip horizontal icon

flip-horizontal-thin from Phosphor by Phosphor Icons · Thin · MIT Free for personal and commercial use.

Name: flip-horizontal-thin
Set: Phosphor
Style: Thin
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

flip-horizontal flip-horizontal-bold flip-horizontal-duotone flip-horizontal-fill flip-horizontal-light

The same icon in other sets

flip-horizontal-16-filledFluent UI System Icons flip-horizontalHuge Icons flip-horizontalMaterial Design Icons flip-horizontal-fillMingCute Icon flip-horizontal-fillRemix Icon flip-horizontal-boldSolar flip-horizontalTabler Icons flip-horizontal-outlineTeenyicons

Related icons in Phosphor

flip-vertical

Use the flip horizontal icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M106.38 28.26a11.76 11.76 0 0 0-13.44 7.08v.08L29 195.32A12 12 0 0 0 40 212h64a12 12 0 0 0 12-12V40a11.75 11.75 0 0 0-9.62-11.74M108 200a4 4 0 0 1-4 4H40a3.93 3.93 0 0 1-3.33-1.79a4 4 0 0 1-.32-3.84l64-159.94A4 4 0 0 1 108 40Zm119.07-4.6l-64-160v-.08A12 12 0 0 0 140 40v160a12 12 0 0 0 12 12h64a12 12 0 0 0 11.08-16.6Zm-7.75 6.81A3.93 3.93 0 0 1 216 204h-64a4 4 0 0 1-4-4V40a3.81 3.81 0 0 1 3.2-3.92a4.6 4.6 0 0 1 .9-.09a3.69 3.69 0 0 1 3.57 2.42l64 160a3.9 3.9 0 0 1-.35 3.8"/></svg>

React

import type { SVGProps } from "react";

export function PhFlipHorizontalThin(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M106.38 28.26a11.76 11.76 0 0 0-13.44 7.08v.08L29 195.32A12 12 0 0 0 40 212h64a12 12 0 0 0 12-12V40a11.75 11.75 0 0 0-9.62-11.74M108 200a4 4 0 0 1-4 4H40a3.93 3.93 0 0 1-3.33-1.79a4 4 0 0 1-.32-3.84l64-159.94A4 4 0 0 1 108 40Zm119.07-4.6l-64-160v-.08A12 12 0 0 0 140 40v160a12 12 0 0 0 12 12h64a12 12 0 0 0 11.08-16.6Zm-7.75 6.81A3.93 3.93 0 0 1 216 204h-64a4 4 0 0 1-4-4V40a3.81 3.81 0 0 1 3.2-3.92a4.6 4.6 0 0 1 .9-.09a3.69 3.69 0 0 1 3.57 2.42l64 160a3.9 3.9 0 0 1-.35 3.8"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M106.38 28.26a11.76 11.76 0 0 0-13.44 7.08v.08L29 195.32A12 12 0 0 0 40 212h64a12 12 0 0 0 12-12V40a11.75 11.75 0 0 0-9.62-11.74M108 200a4 4 0 0 1-4 4H40a3.93 3.93 0 0 1-3.33-1.79a4 4 0 0 1-.32-3.84l64-159.94A4 4 0 0 1 108 40Zm119.07-4.6l-64-160v-.08A12 12 0 0 0 140 40v160a12 12 0 0 0 12 12h64a12 12 0 0 0 11.08-16.6Zm-7.75 6.81A3.93 3.93 0 0 1 216 204h-64a4 4 0 0 1-4-4V40a3.81 3.81 0 0 1 3.2-3.92a4.6 4.6 0 0 1 .9-.09a3.69 3.69 0 0 1 3.57 2.42l64 160a3.9 3.9 0 0 1-.35 3.8"/></svg>
</template>

CSS

.icon-flip-horizontal-thin {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M106.38%2028.26a11.76%2011.76%200%200%200-13.44%207.08v.08L29%20195.32A12%2012%200%200%200%2040%20212h64a12%2012%200%200%200%2012-12V40a11.75%2011.75%200%200%200-9.62-11.74M108%20200a4%204%200%200%201-4%204H40a3.93%203.93%200%200%201-3.33-1.79a4%204%200%200%201-.32-3.84l64-159.94A4%204%200%200%201%20108%2040Zm119.07-4.6l-64-160v-.08A12%2012%200%200%200%20140%2040v160a12%2012%200%200%200%2012%2012h64a12%2012%200%200%200%2011.08-16.6Zm-7.75%206.81A3.93%203.93%200%200%201%20216%20204h-64a4%204%200%200%201-4-4V40a3.81%203.81%200%200%201%203.2-3.92a4.6%204.6%200%200%201%20.9-.09a3.69%203.69%200%200%201%203.57%202.42l64%20160a3.9%203.9%200%200%201-.35%203.8%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M106.38%2028.26a11.76%2011.76%200%200%200-13.44%207.08v.08L29%20195.32A12%2012%200%200%200%2040%20212h64a12%2012%200%200%200%2012-12V40a11.75%2011.75%200%200%200-9.62-11.74M108%20200a4%204%200%200%201-4%204H40a3.93%203.93%200%200%201-3.33-1.79a4%204%200%200%201-.32-3.84l64-159.94A4%204%200%200%201%20108%2040Zm119.07-4.6l-64-160v-.08A12%2012%200%200%200%20140%2040v160a12%2012%200%200%200%2012%2012h64a12%2012%200%200%200%2011.08-16.6Zm-7.75%206.81A3.93%203.93%200%200%201%20216%20204h-64a4%204%200%200%201-4-4V40a3.81%203.81%200%200%201%203.2-3.92a4.6%204.6%200%200%201%20.9-.09a3.69%203.69%200%200%201%203.57%202.42l64%20160a3.9%203.9%200%200%201-.35%203.8%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/flip-horizontal-thin.svg?color=%231a73e8&size=48