view icon

view from Element Plus by Element Plus · Outline · MIT Free for personal and commercial use.

Name: view
Set: Element Plus
Style: Outline
Viewbox: 1024×1024
License: MIT

The same icon in other sets

Use the view icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 160c320 0 512 352 512 352S832 864 512 864S0 512 0 512s192-352 512-352m0 64c-225.3 0-384.1 208-436.8 288c52.6 79.9 211.5 288 436.8 288s384.1-208 436.8-288C896.2 432.1 737.3 224 512 224m0 64a224 224 0 1 1 0 448a224 224 0 0 1 0-448m0 64a160 160 0 0 0-160 160c0 88.2 71.7 160 160 160s160-71.8 160-160s-71.7-160-160-160"/></svg>

React

import type { SVGProps } from "react";

export function EpView(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 160c320 0 512 352 512 352S832 864 512 864S0 512 0 512s192-352 512-352m0 64c-225.3 0-384.1 208-436.8 288c52.6 79.9 211.5 288 436.8 288s384.1-208 436.8-288C896.2 432.1 737.3 224 512 224m0 64a224 224 0 1 1 0 448a224 224 0 0 1 0-448m0 64a160 160 0 0 0-160 160c0 88.2 71.7 160 160 160s160-71.8 160-160s-71.7-160-160-160"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 160c320 0 512 352 512 352S832 864 512 864S0 512 0 512s192-352 512-352m0 64c-225.3 0-384.1 208-436.8 288c52.6 79.9 211.5 288 436.8 288s384.1-208 436.8-288C896.2 432.1 737.3 224 512 224m0 64a224 224 0 1 1 0 448a224 224 0 0 1 0-448m0 64a160 160 0 0 0-160 160c0 88.2 71.7 160 160 160s160-71.8 160-160s-71.7-160-160-160"/></svg>
</template>

CSS

.icon-view {
  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%201024%201024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M512%20160c320%200%20512%20352%20512%20352S832%20864%20512%20864S0%20512%200%20512s192-352%20512-352m0%2064c-225.3%200-384.1%20208-436.8%20288c52.6%2079.9%20211.5%20288%20436.8%20288s384.1-208%20436.8-288C896.2%20432.1%20737.3%20224%20512%20224m0%2064a224%20224%200%201%201%200%20448a224%20224%200%200%201%200-448m0%2064a160%20160%200%200%200-160%20160c0%2088.2%2071.7%20160%20160%20160s160-71.8%20160-160s-71.7-160-160-160%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%201024%201024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M512%20160c320%200%20512%20352%20512%20352S832%20864%20512%20864S0%20512%200%20512s192-352%20512-352m0%2064c-225.3%200-384.1%20208-436.8%20288c52.6%2079.9%20211.5%20288%20436.8%20288s384.1-208%20436.8-288C896.2%20432.1%20737.3%20224%20512%20224m0%2064a224%20224%200%201%201%200%20448a224%20224%200%200%201%200-448m0%2064a160%20160%200%200%200-160%20160c0%2088.2%2071.7%20160%20160%20160s160-71.8%20160-160s-71.7-160-160-160%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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