Eye Lines icon (Filled & Regular)

Used to represent low vision modes and settings. The Eye Lines icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Use the Eye Lines icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { EyeLines24Regular, EyeLines24Filled } from "@fluentui/react-icons";

export function Example() {
  return <EyeLines24Regular aria-label="Eye Lines" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_eye_lines_24_regular.svg" width="24" height="24" alt="Eye Lines">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.35352 12.5C9.28608 12.2616 9.25 12.01 9.25 11.75C9.25 11.49 9.28608 11.2384 9.35352 11H2.35445C2.28594 11.2911 2.25 11.5472 2.25 11.75C2.25 11.9528 2.28594 12.2089 2.35445 12.5H9.35352ZM11.9994 18.5H6.67846C8.06161 19.3895 9.81651 19.9999 11.9994 20H12.0012C15.642 20 18.0923 18.3023 19.6129 16.4437C20.3682 15.5206 20.8961 14.5571 21.2368 13.7369C21.5667 12.9427 21.7512 12.2094 21.7512 11.75C21.7512 11.2906 21.5667 10.5573 21.2368 9.76308C20.8961 8.94291 20.3682 7.97945 19.6129 7.05632C18.0923 5.19775 15.642 3.5 12.0012 3.5H12C9.81711 3.50011 8.06161 4.11054 6.67846 5H11.9994H12.0012C15.1104 5 17.1602 6.42725 18.452 8.00618C19.103 8.8018 19.5594 9.63522 19.8516 10.3385C20.1545 11.0677 20.2512 11.5844 20.2512 11.75C20.2512 11.9156 20.1545 12.4323 19.8516 13.1615C19.5594 13.8648 19.103 14.6982 18.452 15.4938C17.1602 17.0727 15.1104 18.5 12.0012 18.5H11.9994ZM5.38454 6C5.0159 6.33844 4.68446 6.69433 4.38828 7.05632C4.26791 7.20344 4.15332 7.35158 4.04434 7.5H11.9994V6H5.38454ZM11.9994 8.5H3.39075C3.13564 8.94057 2.92835 9.36841 2.76441 9.76308C2.73132 9.84274 2.69969 9.92178 2.66957 10H9.87858C10.383 9.38925 11.146 9 12 9C13.5188 9 14.75 10.2312 14.75 11.75C14.75 13.2688 13.5188 14.5 12 14.5C11.146 14.5 10.383 14.1108 9.87858 13.5H2.66957C2.69969 13.5782 2.73132 13.6573 2.76441 13.7369C2.92835 14.1316 3.13564 14.5594 3.39075 15H11.9994V16C14.3466 16 16.25 14.0972 16.25 11.75C16.25 9.40299 14.3463 7.50033 11.9994 7.5V8.5ZM11.9994 16H4.04434C4.15332 16.1484 4.26791 16.2966 4.38828 16.4437C4.68446 16.8057 5.0159 17.1616 5.38454 17.5H11.9994V16Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/eye_lines_24_regular.svg";

Details

Name	Eye Lines
Styles	Regular (outlined), Filled
Size	24 × 24 px (scalable SVG)
Regular (outlined) file	`ic_fluent_eye_lines_24_regular.svg`
Filled file	`ic_fluent_eye_lines_24_filled.svg`
React components	`EyeLines24Regular, EyeLines24Filled`
License	MIT (© Microsoft Corporation)

Keywords

visual deficiency impairment low vision accessibility high contrast

Eye Lines icon

Use the Eye Lines icon in React

Use it in HTML

Use it from the SVG package

Details

Keywords

Related icons