Hover the icon or press Play. Suggested motion: blink. Pick another to preview it and update the animated code:

Simple Line Icons · SlEye

Eye icon

A free eye icon from Simple Line Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

Also known asview icon show icon visible icon visibility icon watch icon preview icon

License: MIT license
Project: thesabbir.github.io

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/simple-line-icons/eye.json

components/icons/simple-line-icons-eye.tsx

import * as React from "react";

/**
 * Eye from Simple Line Icons (https://thesabbir.github.io/simple-line-icons/), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/simple-line-icons/eye. Sized in em, colored by currentColor.
 */
export function SlEyeIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 1024 1024"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M515.472 321.408c-106.032 0-192 85.968-192 192 0 106.016 85.968 192 192 192s192-85.968 192-192-85.968-192-192-192zm0 320c-70.576 0-129.473-58.816-129.473-129.393s57.424-128 128-128c70.592 0 128 57.424 128 128s-55.935 129.393-126.527 129.393zm508.208-136.832c-.368-1.616-.207-3.325-.688-4.91-.208-.671-.624-1.055-.864-1.647-.336-.912-.256-1.984-.72-2.864-93.072-213.104-293.663-335.76-507.423-335.76S95.617 281.827 2.497 494.947c-.4.897-.336 1.824-.657 2.849-.223.624-.687.975-.895 1.567-.496 1.616-.304 3.296-.608 4.928-.591 2.88-1.135 5.68-1.135 8.592 0 2.944.544 5.664 1.135 8.591.32 1.6.113 3.344.609 4.88.208.72.672 1.024.895 1.68.336.88.256 1.968.656 2.848 93.136 213.056 295.744 333.712 509.504 333.712 213.776 0 416.336-120.4 509.44-333.505.464-.912.369-1.872.72-2.88.224-.56.655-.976.848-1.6.496-1.568.336-3.28.687-4.912.56-2.864 1.088-5.664 1.088-8.624 0-2.816-.528-5.6-1.104-8.497zM512 800.595c-181.296 0-359.743-95.568-447.423-287.681 86.848-191.472 267.68-289.504 449.424-289.504 181.68 0 358.496 98.144 445.376 289.712C872.561 704.53 693.744 800.595 512 800.595z"
      />
    </svg>
  );
}

With react-icons

import { SlEye } from "react-icons/sl";

export function Example() {
  return <SlEye className="size-5" />;
}

eye.svg

<svg
  viewBox="0 0 1024 1024"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M515.472 321.408c-106.032 0-192 85.968-192 192 0 106.016 85.968 192 192 192s192-85.968 192-192-85.968-192-192-192zm0 320c-70.576 0-129.473-58.816-129.473-129.393s57.424-128 128-128c70.592 0 128 57.424 128 128s-55.935 129.393-126.527 129.393zm508.208-136.832c-.368-1.616-.207-3.325-.688-4.91-.208-.671-.624-1.055-.864-1.647-.336-.912-.256-1.984-.72-2.864-93.072-213.104-293.663-335.76-507.423-335.76S95.617 281.827 2.497 494.947c-.4.897-.336 1.824-.657 2.849-.223.624-.687.975-.895 1.567-.496 1.616-.304 3.296-.608 4.928-.591 2.88-1.135 5.68-1.135 8.592 0 2.944.544 5.664 1.135 8.591.32 1.6.113 3.344.609 4.88.208.72.672 1.024.895 1.68.336.88.256 1.968.656 2.848 93.136 213.056 295.744 333.712 509.504 333.712 213.776 0 416.336-120.4 509.44-333.505.464-.912.369-1.872.72-2.88.224-.56.655-.976.848-1.6.496-1.568.336-3.28.687-4.912.56-2.864 1.088-5.664 1.088-8.624 0-2.816-.528-5.6-1.104-8.497zM512 800.595c-181.296 0-359.743-95.568-447.423-287.681 86.848-191.472 267.68-289.504 449.424-289.504 181.68 0 358.496 98.144 445.376 289.712C872.561 704.53 693.744 800.595 512 800.595z"
  />
</svg>

Attribution

"Eye" icon from Simple Line Icons (https://thesabbir.github.io/simple-line-icons/), licensed under MIT license.

Eye icon in other sets

Similar Simple Line Icons icons