Zoom Out icon

Use the Zoom Out 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 { ZoomOut24Regular, ZoomOut24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ZoomOut24Regular aria-label="Zoom Out" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_zoom_out_24_regular.svg" width="24" height="24" alt="Zoom Out">

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="M12.75 9.25C13.1642 9.25 13.5 9.58579 13.5 10C13.5 10.4142 13.1642 10.75 12.75 10.75H7.25C6.83579 10.75 6.5 10.4142 6.5 10C6.5 9.58579 6.83579 9.25 7.25 9.25H12.75ZM10 2C14.4183 2 18 5.58172 18 10C18 11.9391 17.3098 13.7168 16.1621 15.1016L20.7803 19.7197C21.0731 20.0126 21.0731 20.4874 20.7803 20.7803C20.4874 21.0732 20.0126 21.0732 19.7197 20.7803L15.1016 16.1621C13.7168 17.3098 11.9391 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 3.5C6.41015 3.5 3.5 6.41015 3.5 10C3.5 13.5899 6.41015 16.5 10 16.5C13.5899 16.5 16.5 13.5899 16.5 10C16.5 6.41015 13.5899 3.5 10 3.5Z" 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/zoom_out_24_regular.svg";

Details

Keywords

zoominzoomoutmagnifyingglasssearch