eye icon
eye-bold from Phosphor by Phosphor Icons · Bold · MIT Free for personal and commercial use.
- Name
- eye-bold
- Set
- Phosphor
- Style
- Bold
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
The same icon in other sets
eyeAkar IconseyeBootstrap IconseyeEmoji One (Colored)eye-fillEva IconseyeFramework7 IconseyeFont Awesome 6 RegulareyeFont Awesome 6 SolideyeFeather Iconseye-12-filledFluent UI System IconseyeFluent EmojieyeFluent Emoji FlateyeFluent Emoji High Contrasteyecss.ggeyeHeroIconseyeHuge IconseyeHumbleiconseyeIconoireyeIonIconseyeJam IconseyeLine AwesomeeyeLucideeyeMage IconseyeMajesticonseyeMaterial Design Icons
Related icons in Phosphor
Use the eye icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M251 123.13c-.37-.81-9.13-20.26-28.48-39.61C196.63 57.67 164 44 128 44S59.37 57.67 33.51 83.52C14.16 102.87 5.4 122.32 5 123.13a12.08 12.08 0 0 0 0 9.75c.37.82 9.13 20.26 28.49 39.61C59.37 198.34 92 212 128 212s68.63-13.66 94.48-39.51c19.36-19.35 28.12-38.79 28.49-39.61a12.08 12.08 0 0 0 .03-9.75m-46.06 33C183.47 177.27 157.59 188 128 188s-55.47-10.73-76.91-31.88A130.4 130.4 0 0 1 29.52 128a130.5 130.5 0 0 1 21.57-28.11C72.54 78.73 98.41 68 128 68s55.46 10.73 76.91 31.89A130.4 130.4 0 0 1 226.48 128a130.5 130.5 0 0 1-21.57 28.12ZM128 84a44 44 0 1 0 44 44a44.05 44.05 0 0 0-44-44m0 64a20 20 0 1 1 20-20a20 20 0 0 1-20 20"/></svg>
React
import type { SVGProps } from "react";
export function PhEyeBold(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="M251 123.13c-.37-.81-9.13-20.26-28.48-39.61C196.63 57.67 164 44 128 44S59.37 57.67 33.51 83.52C14.16 102.87 5.4 122.32 5 123.13a12.08 12.08 0 0 0 0 9.75c.37.82 9.13 20.26 28.49 39.61C59.37 198.34 92 212 128 212s68.63-13.66 94.48-39.51c19.36-19.35 28.12-38.79 28.49-39.61a12.08 12.08 0 0 0 .03-9.75m-46.06 33C183.47 177.27 157.59 188 128 188s-55.47-10.73-76.91-31.88A130.4 130.4 0 0 1 29.52 128a130.5 130.5 0 0 1 21.57-28.11C72.54 78.73 98.41 68 128 68s55.46 10.73 76.91 31.89A130.4 130.4 0 0 1 226.48 128a130.5 130.5 0 0 1-21.57 28.12ZM128 84a44 44 0 1 0 44 44a44.05 44.05 0 0 0-44-44m0 64a20 20 0 1 1 20-20a20 20 0 0 1-20 20"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M251 123.13c-.37-.81-9.13-20.26-28.48-39.61C196.63 57.67 164 44 128 44S59.37 57.67 33.51 83.52C14.16 102.87 5.4 122.32 5 123.13a12.08 12.08 0 0 0 0 9.75c.37.82 9.13 20.26 28.49 39.61C59.37 198.34 92 212 128 212s68.63-13.66 94.48-39.51c19.36-19.35 28.12-38.79 28.49-39.61a12.08 12.08 0 0 0 .03-9.75m-46.06 33C183.47 177.27 157.59 188 128 188s-55.47-10.73-76.91-31.88A130.4 130.4 0 0 1 29.52 128a130.5 130.5 0 0 1 21.57-28.11C72.54 78.73 98.41 68 128 68s55.46 10.73 76.91 31.89A130.4 130.4 0 0 1 226.48 128a130.5 130.5 0 0 1-21.57 28.12ZM128 84a44 44 0 1 0 44 44a44.05 44.05 0 0 0-44-44m0 64a20 20 0 1 1 20-20a20 20 0 0 1-20 20"/></svg> </template>
CSS
.icon-eye-bold {
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%22M251%20123.13c-.37-.81-9.13-20.26-28.48-39.61C196.63%2057.67%20164%2044%20128%2044S59.37%2057.67%2033.51%2083.52C14.16%20102.87%205.4%20122.32%205%20123.13a12.08%2012.08%200%200%200%200%209.75c.37.82%209.13%2020.26%2028.49%2039.61C59.37%20198.34%2092%20212%20128%20212s68.63-13.66%2094.48-39.51c19.36-19.35%2028.12-38.79%2028.49-39.61a12.08%2012.08%200%200%200%20.03-9.75m-46.06%2033C183.47%20177.27%20157.59%20188%20128%20188s-55.47-10.73-76.91-31.88A130.4%20130.4%200%200%201%2029.52%20128a130.5%20130.5%200%200%201%2021.57-28.11C72.54%2078.73%2098.41%2068%20128%2068s55.46%2010.73%2076.91%2031.89A130.4%20130.4%200%200%201%20226.48%20128a130.5%20130.5%200%200%201-21.57%2028.12ZM128%2084a44%2044%200%201%200%2044%2044a44.05%2044.05%200%200%200-44-44m0%2064a20%2020%200%201%201%2020-20a20%2020%200%200%201-20%2020%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%22M251%20123.13c-.37-.81-9.13-20.26-28.48-39.61C196.63%2057.67%20164%2044%20128%2044S59.37%2057.67%2033.51%2083.52C14.16%20102.87%205.4%20122.32%205%20123.13a12.08%2012.08%200%200%200%200%209.75c.37.82%209.13%2020.26%2028.49%2039.61C59.37%20198.34%2092%20212%20128%20212s68.63-13.66%2094.48-39.51c19.36-19.35%2028.12-38.79%2028.49-39.61a12.08%2012.08%200%200%200%20.03-9.75m-46.06%2033C183.47%20177.27%20157.59%20188%20128%20188s-55.47-10.73-76.91-31.88A130.4%20130.4%200%200%201%2029.52%20128a130.5%20130.5%200%200%201%2021.57-28.11C72.54%2078.73%2098.41%2068%20128%2068s55.46%2010.73%2076.91%2031.89A130.4%20130.4%200%200%201%20226.48%20128a130.5%20130.5%200%200%201-21.57%2028.12ZM128%2084a44%2044%200%201%200%2044%2044a44.05%2044.05%200%200%200-44-44m0%2064a20%2020%200%201%201%2020-20a20%2020%200%200%201-20%2020%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/eye-bold.svg?color=%231a73e8&size=48
