change screen mode icon

change-screen-mode from Huge Icons by Hugeicons · Stroke · MIT Free for personal and commercial use.

Name
change-screen-mode
Set
Huge Icons
Style
Stroke
Viewbox
24×24
License
MIT

Use the change screen mode icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M16 2h-4c-2.828 0-4.243 0-5.121.946C6 3.893 6 5.416 6 8.462v1.076c0 3.047 0 4.57.879 5.516C7.757 16 9.172 16 12 16h4c2.828 0 4.243 0 5.121-.946c.879-.947.879-2.47.879-5.516V8.462c0-3.046 0-4.57-.879-5.516C20.243 2 18.828 2 16 2Z"/><path d="M18 16.608c-.012 2.346-.109 3.616-.877 4.444c-.879.948-2.293.948-5.122.948h-4c-2.83 0-4.243 0-5.122-.948C2 20.106 2 18.58 2 15.53v-1.078c0-3.05 0-4.576.879-5.523C3.52 8.237 4.447 8.05 6 8"/></g></svg>

React

import type { SVGProps } from "react";

export function HugeiconsChangeScreenMode(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M16 2h-4c-2.828 0-4.243 0-5.121.946C6 3.893 6 5.416 6 8.462v1.076c0 3.047 0 4.57.879 5.516C7.757 16 9.172 16 12 16h4c2.828 0 4.243 0 5.121-.946c.879-.947.879-2.47.879-5.516V8.462c0-3.046 0-4.57-.879-5.516C20.243 2 18.828 2 16 2Z"/><path d="M18 16.608c-.012 2.346-.109 3.616-.877 4.444c-.879.948-2.293.948-5.122.948h-4c-2.83 0-4.243 0-5.122-.948C2 20.106 2 18.58 2 15.53v-1.078c0-3.05 0-4.576.879-5.523C3.52 8.237 4.447 8.05 6 8"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M16 2h-4c-2.828 0-4.243 0-5.121.946C6 3.893 6 5.416 6 8.462v1.076c0 3.047 0 4.57.879 5.516C7.757 16 9.172 16 12 16h4c2.828 0 4.243 0 5.121-.946c.879-.947.879-2.47.879-5.516V8.462c0-3.046 0-4.57-.879-5.516C20.243 2 18.828 2 16 2Z"/><path d="M18 16.608c-.012 2.346-.109 3.616-.877 4.444c-.879.948-2.293.948-5.122.948h-4c-2.83 0-4.243 0-5.122-.948C2 20.106 2 18.58 2 15.53v-1.078c0-3.05 0-4.576.879-5.523C3.52 8.237 4.447 8.05 6 8"/></g></svg>
</template>

CSS

.icon-change-screen-mode {
  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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M16%202h-4c-2.828%200-4.243%200-5.121.946C6%203.893%206%205.416%206%208.462v1.076c0%203.047%200%204.57.879%205.516C7.757%2016%209.172%2016%2012%2016h4c2.828%200%204.243%200%205.121-.946c.879-.947.879-2.47.879-5.516V8.462c0-3.046%200-4.57-.879-5.516C20.243%202%2018.828%202%2016%202Z%22%2F%3E%3Cpath%20d%3D%22M18%2016.608c-.012%202.346-.109%203.616-.877%204.444c-.879.948-2.293.948-5.122.948h-4c-2.83%200-4.243%200-5.122-.948C2%2020.106%202%2018.58%202%2015.53v-1.078c0-3.05%200-4.576.879-5.523C3.52%208.237%204.447%208.05%206%208%22%2F%3E%3C%2Fg%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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M16%202h-4c-2.828%200-4.243%200-5.121.946C6%203.893%206%205.416%206%208.462v1.076c0%203.047%200%204.57.879%205.516C7.757%2016%209.172%2016%2012%2016h4c2.828%200%204.243%200%205.121-.946c.879-.947.879-2.47.879-5.516V8.462c0-3.046%200-4.57-.879-5.516C20.243%202%2018.828%202%2016%202Z%22%2F%3E%3Cpath%20d%3D%22M18%2016.608c-.012%202.346-.109%203.616-.877%204.444c-.879.948-2.293.948-5.122.948h-4c-2.83%200-4.243%200-5.122-.948C2%2020.106%202%2018.58%202%2015.53v-1.078c0-3.05%200-4.576.879-5.523C3.52%208.237%204.447%208.05%206%208%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/hugeicons/change-screen-mode.svg?color=%231a73e8&size=48