eye icon
eye-24 from Octicons by GitHub · 24 · MIT Free for personal and commercial use.
- Name
- eye-24
- Set
- Octicons
- Style
- 24
- Viewbox
- 24×24
- License
- MIT
2 other variants in Octicons
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 RegulareyeFont Awesome SolideyeFeather Iconseye-outlineFlowbite Iconseye-12-filledFluent UI System IconseyeFluent EmojieyeFluent Emoji FlateyeFluent Emoji High ContrasteyeFirefox OS Emojieyecss.ggeyeHealth IconseyeHeroIconseyeHuge IconseyeHumbleiconseyeIconoir
Related icons in Octicons
Use the eye icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M15.5 12a3.5 3.5 0 1 1-7 0a3.5 3.5 0 0 1 7 0"/><path fill="currentColor" d="M12 3.5c3.432 0 6.124 1.534 8.054 3.241c1.926 1.703 3.132 3.61 3.616 4.46a1.6 1.6 0 0 1 0 1.598c-.484.85-1.69 2.757-3.616 4.461c-1.929 1.706-4.622 3.24-8.054 3.24s-6.124-1.534-8.054-3.24C2.02 15.558.814 13.65.33 12.8a1.6 1.6 0 0 1 0-1.598c.484-.85 1.69-2.757 3.616-4.462C5.875 5.034 8.568 3.5 12 3.5M1.633 11.945a.1.1 0 0 0-.017.055q.001.03.017.056c.441.774 1.551 2.527 3.307 4.08C6.691 17.685 9.045 19 12 19s5.31-1.315 7.06-2.864c1.756-1.553 2.866-3.306 3.307-4.08a.1.1 0 0 0 .017-.056a.1.1 0 0 0-.017-.056c-.441-.773-1.551-2.527-3.307-4.08C17.309 6.315 14.955 5 12 5S6.69 6.314 4.94 7.865c-1.756 1.552-2.866 3.306-3.307 4.08"/></svg>
React
import type { SVGProps } from "react";
export function OcticonEye24(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M15.5 12a3.5 3.5 0 1 1-7 0a3.5 3.5 0 0 1 7 0"/><path fill="currentColor" d="M12 3.5c3.432 0 6.124 1.534 8.054 3.241c1.926 1.703 3.132 3.61 3.616 4.46a1.6 1.6 0 0 1 0 1.598c-.484.85-1.69 2.757-3.616 4.461c-1.929 1.706-4.622 3.24-8.054 3.24s-6.124-1.534-8.054-3.24C2.02 15.558.814 13.65.33 12.8a1.6 1.6 0 0 1 0-1.598c.484-.85 1.69-2.757 3.616-4.462C5.875 5.034 8.568 3.5 12 3.5M1.633 11.945a.1.1 0 0 0-.017.055q.001.03.017.056c.441.774 1.551 2.527 3.307 4.08C6.691 17.685 9.045 19 12 19s5.31-1.315 7.06-2.864c1.756-1.553 2.866-3.306 3.307-4.08a.1.1 0 0 0 .017-.056a.1.1 0 0 0-.017-.056c-.441-.773-1.551-2.527-3.307-4.08C17.309 6.315 14.955 5 12 5S6.69 6.314 4.94 7.865c-1.756 1.552-2.866 3.306-3.307 4.08"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M15.5 12a3.5 3.5 0 1 1-7 0a3.5 3.5 0 0 1 7 0"/><path fill="currentColor" d="M12 3.5c3.432 0 6.124 1.534 8.054 3.241c1.926 1.703 3.132 3.61 3.616 4.46a1.6 1.6 0 0 1 0 1.598c-.484.85-1.69 2.757-3.616 4.461c-1.929 1.706-4.622 3.24-8.054 3.24s-6.124-1.534-8.054-3.24C2.02 15.558.814 13.65.33 12.8a1.6 1.6 0 0 1 0-1.598c.484-.85 1.69-2.757 3.616-4.462C5.875 5.034 8.568 3.5 12 3.5M1.633 11.945a.1.1 0 0 0-.017.055q.001.03.017.056c.441.774 1.551 2.527 3.307 4.08C6.691 17.685 9.045 19 12 19s5.31-1.315 7.06-2.864c1.756-1.553 2.866-3.306 3.307-4.08a.1.1 0 0 0 .017-.056a.1.1 0 0 0-.017-.056c-.441-.773-1.551-2.527-3.307-4.08C17.309 6.315 14.955 5 12 5S6.69 6.314 4.94 7.865c-1.756 1.552-2.866 3.306-3.307 4.08"/></svg> </template>
CSS
.icon-eye-24 {
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%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M15.5%2012a3.5%203.5%200%201%201-7%200a3.5%203.5%200%200%201%207%200%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%203.5c3.432%200%206.124%201.534%208.054%203.241c1.926%201.703%203.132%203.61%203.616%204.46a1.6%201.6%200%200%201%200%201.598c-.484.85-1.69%202.757-3.616%204.461c-1.929%201.706-4.622%203.24-8.054%203.24s-6.124-1.534-8.054-3.24C2.02%2015.558.814%2013.65.33%2012.8a1.6%201.6%200%200%201%200-1.598c.484-.85%201.69-2.757%203.616-4.462C5.875%205.034%208.568%203.5%2012%203.5M1.633%2011.945a.1.1%200%200%200-.017.055q.001.03.017.056c.441.774%201.551%202.527%203.307%204.08C6.691%2017.685%209.045%2019%2012%2019s5.31-1.315%207.06-2.864c1.756-1.553%202.866-3.306%203.307-4.08a.1.1%200%200%200%20.017-.056a.1.1%200%200%200-.017-.056c-.441-.773-1.551-2.527-3.307-4.08C17.309%206.315%2014.955%205%2012%205S6.69%206.314%204.94%207.865c-1.756%201.552-2.866%203.306-3.307%204.08%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M15.5%2012a3.5%203.5%200%201%201-7%200a3.5%203.5%200%200%201%207%200%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%203.5c3.432%200%206.124%201.534%208.054%203.241c1.926%201.703%203.132%203.61%203.616%204.46a1.6%201.6%200%200%201%200%201.598c-.484.85-1.69%202.757-3.616%204.461c-1.929%201.706-4.622%203.24-8.054%203.24s-6.124-1.534-8.054-3.24C2.02%2015.558.814%2013.65.33%2012.8a1.6%201.6%200%200%201%200-1.598c.484-.85%201.69-2.757%203.616-4.462C5.875%205.034%208.568%203.5%2012%203.5M1.633%2011.945a.1.1%200%200%200-.017.055q.001.03.017.056c.441.774%201.551%202.527%203.307%204.08C6.691%2017.685%209.045%2019%2012%2019s5.31-1.315%207.06-2.864c1.756-1.553%202.866-3.306%203.307-4.08a.1.1%200%200%200%20.017-.056a.1.1%200%200%200-.017-.056c-.441-.773-1.551-2.527-3.307-4.08C17.309%206.315%2014.955%205%2012%205S6.69%206.314%204.94%207.865c-1.756%201.552-2.866%203.306-3.307%204.08%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/octicon/eye-24.svg?color=%231a73e8&size=48
