eye icon

eye from Font Awesome Regular by Dave Gandy · Regular · Design · CC-BY-4.0 Attribution required.

Name
eye
Set
Font Awesome Regular
Style
Regular
Category
Design
Viewbox
640×640
License
CC BY 4.0

The same icon in other sets

eyeAkar Iconseye-filledAnt Design IconseyeBootstrap IconseyeCodiconseyeEmoji One (Colored)eye-fillEva IconseyeFramework7 IconseyeFont Awesome 6 RegulareyeFont Awesome 6 SolideyeFont Awesome SolideyeFeather Iconseye-outlineFlowbite Iconseye-12-filledFluent UI System IconseyeFluent EmojieyeFluent Emoji FlateyeFluent Emoji High ContrasteyeFirefox OS Emojieyecss.ggeyeHealth IconseyeHeroIconseyeHuge IconseyeHumbleiconseyeIconoireyeIonIcons

More design icons from Font Awesome Regular

cloneeye-slashobject-groupobject-ungroup

Use the eye icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M320 144c-65.2 0-118.8 29.6-159.9 67.7C121.6 247.5 95 290 81.4 320c13.6 30 40.2 72.5 78.7 108.3C201.2 466.4 254.8 496 320 496s118.8-29.6 159.9-67.7C518.4 392.5 545 350 558.6 320c-13.6-30-40.2-72.5-78.7-108.3C438.8 173.6 385.2 144 320 144m-192.6 32.6C174.5 132.8 239.2 96 320 96s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C465.5 507.1 400.8 544 320 544s-145.5-36.8-192.6-80.6c-46.8-43.5-78.1-95.4-93-131.1c-3.3-7.9-3.3-16.7 0-24.6c14.9-35.7 46.2-87.7 93-131.1M320 400c44.2 0 80-35.8 80-80c0-29.6-16.1-55.5-40-69.3c-1.4 59.7-49.6 107.9-109.3 109.3c13.8 23.9 39.7 40 69.3 40m-79.6-88.4c2.5.3 5 .4 7.6.4c35.3 0 64-28.7 64-64c0-2.6-.2-5.1-.4-7.6c-37.4 3.9-67.2 33.7-71.1 71.1zm45.6-115c10.8-3 22.2-4.5 33.9-4.5c8.8 0 17.5.9 25.8 2.6c.3.1.5.1.8.2c57.9 12.2 101.4 63.7 101.4 125.2c0 70.7-57.3 128-128 128c-61.6 0-113-43.5-125.2-101.4c-1.8-8.6-2.8-17.5-2.8-26.6c0-11 1.4-21.8 4-32c.2-.7.3-1.3.5-1.9c11.9-43.4 46.1-77.6 89.5-89.5z"/></svg>

React

import type { SVGProps } from "react";

export function Fa7RegularEye(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M320 144c-65.2 0-118.8 29.6-159.9 67.7C121.6 247.5 95 290 81.4 320c13.6 30 40.2 72.5 78.7 108.3C201.2 466.4 254.8 496 320 496s118.8-29.6 159.9-67.7C518.4 392.5 545 350 558.6 320c-13.6-30-40.2-72.5-78.7-108.3C438.8 173.6 385.2 144 320 144m-192.6 32.6C174.5 132.8 239.2 96 320 96s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C465.5 507.1 400.8 544 320 544s-145.5-36.8-192.6-80.6c-46.8-43.5-78.1-95.4-93-131.1c-3.3-7.9-3.3-16.7 0-24.6c14.9-35.7 46.2-87.7 93-131.1M320 400c44.2 0 80-35.8 80-80c0-29.6-16.1-55.5-40-69.3c-1.4 59.7-49.6 107.9-109.3 109.3c13.8 23.9 39.7 40 69.3 40m-79.6-88.4c2.5.3 5 .4 7.6.4c35.3 0 64-28.7 64-64c0-2.6-.2-5.1-.4-7.6c-37.4 3.9-67.2 33.7-71.1 71.1zm45.6-115c10.8-3 22.2-4.5 33.9-4.5c8.8 0 17.5.9 25.8 2.6c.3.1.5.1.8.2c57.9 12.2 101.4 63.7 101.4 125.2c0 70.7-57.3 128-128 128c-61.6 0-113-43.5-125.2-101.4c-1.8-8.6-2.8-17.5-2.8-26.6c0-11 1.4-21.8 4-32c.2-.7.3-1.3.5-1.9c11.9-43.4 46.1-77.6 89.5-89.5z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M320 144c-65.2 0-118.8 29.6-159.9 67.7C121.6 247.5 95 290 81.4 320c13.6 30 40.2 72.5 78.7 108.3C201.2 466.4 254.8 496 320 496s118.8-29.6 159.9-67.7C518.4 392.5 545 350 558.6 320c-13.6-30-40.2-72.5-78.7-108.3C438.8 173.6 385.2 144 320 144m-192.6 32.6C174.5 132.8 239.2 96 320 96s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C465.5 507.1 400.8 544 320 544s-145.5-36.8-192.6-80.6c-46.8-43.5-78.1-95.4-93-131.1c-3.3-7.9-3.3-16.7 0-24.6c14.9-35.7 46.2-87.7 93-131.1M320 400c44.2 0 80-35.8 80-80c0-29.6-16.1-55.5-40-69.3c-1.4 59.7-49.6 107.9-109.3 109.3c13.8 23.9 39.7 40 69.3 40m-79.6-88.4c2.5.3 5 .4 7.6.4c35.3 0 64-28.7 64-64c0-2.6-.2-5.1-.4-7.6c-37.4 3.9-67.2 33.7-71.1 71.1zm45.6-115c10.8-3 22.2-4.5 33.9-4.5c8.8 0 17.5.9 25.8 2.6c.3.1.5.1.8.2c57.9 12.2 101.4 63.7 101.4 125.2c0 70.7-57.3 128-128 128c-61.6 0-113-43.5-125.2-101.4c-1.8-8.6-2.8-17.5-2.8-26.6c0-11 1.4-21.8 4-32c.2-.7.3-1.3.5-1.9c11.9-43.4 46.1-77.6 89.5-89.5z"/></svg>
</template>

CSS

.icon-eye {
  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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M320%20144c-65.2%200-118.8%2029.6-159.9%2067.7C121.6%20247.5%2095%20290%2081.4%20320c13.6%2030%2040.2%2072.5%2078.7%20108.3C201.2%20466.4%20254.8%20496%20320%20496s118.8-29.6%20159.9-67.7C518.4%20392.5%20545%20350%20558.6%20320c-13.6-30-40.2-72.5-78.7-108.3C438.8%20173.6%20385.2%20144%20320%20144m-192.6%2032.6C174.5%20132.8%20239.2%2096%20320%2096s145.5%2036.8%20192.6%2080.6c46.8%2043.5%2078.1%2095.4%2093%20131.1c3.3%207.9%203.3%2016.7%200%2024.6c-14.9%2035.7-46.2%2087.7-93%20131.1C465.5%20507.1%20400.8%20544%20320%20544s-145.5-36.8-192.6-80.6c-46.8-43.5-78.1-95.4-93-131.1c-3.3-7.9-3.3-16.7%200-24.6c14.9-35.7%2046.2-87.7%2093-131.1M320%20400c44.2%200%2080-35.8%2080-80c0-29.6-16.1-55.5-40-69.3c-1.4%2059.7-49.6%20107.9-109.3%20109.3c13.8%2023.9%2039.7%2040%2069.3%2040m-79.6-88.4c2.5.3%205%20.4%207.6.4c35.3%200%2064-28.7%2064-64c0-2.6-.2-5.1-.4-7.6c-37.4%203.9-67.2%2033.7-71.1%2071.1zm45.6-115c10.8-3%2022.2-4.5%2033.9-4.5c8.8%200%2017.5.9%2025.8%202.6c.3.1.5.1.8.2c57.9%2012.2%20101.4%2063.7%20101.4%20125.2c0%2070.7-57.3%20128-128%20128c-61.6%200-113-43.5-125.2-101.4c-1.8-8.6-2.8-17.5-2.8-26.6c0-11%201.4-21.8%204-32c.2-.7.3-1.3.5-1.9c11.9-43.4%2046.1-77.6%2089.5-89.5z%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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M320%20144c-65.2%200-118.8%2029.6-159.9%2067.7C121.6%20247.5%2095%20290%2081.4%20320c13.6%2030%2040.2%2072.5%2078.7%20108.3C201.2%20466.4%20254.8%20496%20320%20496s118.8-29.6%20159.9-67.7C518.4%20392.5%20545%20350%20558.6%20320c-13.6-30-40.2-72.5-78.7-108.3C438.8%20173.6%20385.2%20144%20320%20144m-192.6%2032.6C174.5%20132.8%20239.2%2096%20320%2096s145.5%2036.8%20192.6%2080.6c46.8%2043.5%2078.1%2095.4%2093%20131.1c3.3%207.9%203.3%2016.7%200%2024.6c-14.9%2035.7-46.2%2087.7-93%20131.1C465.5%20507.1%20400.8%20544%20320%20544s-145.5-36.8-192.6-80.6c-46.8-43.5-78.1-95.4-93-131.1c-3.3-7.9-3.3-16.7%200-24.6c14.9-35.7%2046.2-87.7%2093-131.1M320%20400c44.2%200%2080-35.8%2080-80c0-29.6-16.1-55.5-40-69.3c-1.4%2059.7-49.6%20107.9-109.3%20109.3c13.8%2023.9%2039.7%2040%2069.3%2040m-79.6-88.4c2.5.3%205%20.4%207.6.4c35.3%200%2064-28.7%2064-64c0-2.6-.2-5.1-.4-7.6c-37.4%203.9-67.2%2033.7-71.1%2071.1zm45.6-115c10.8-3%2022.2-4.5%2033.9-4.5c8.8%200%2017.5.9%2025.8%202.6c.3.1.5.1.8.2c57.9%2012.2%20101.4%2063.7%20101.4%20125.2c0%2070.7-57.3%20128-128%20128c-61.6%200-113-43.5-125.2-101.4c-1.8-8.6-2.8-17.5-2.8-26.6c0-11%201.4-21.8%204-32c.2-.7.3-1.3.5-1.9c11.9-43.4%2046.1-77.6%2089.5-89.5z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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