Stack icon

Use the Stack 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 { Stack24Regular, Stack24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Stack24Regular aria-label="Stack" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_stack_24_regular.svg" width="24" height="24" alt="Stack">

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="M4 4H15C16.1046 4 17 4.89543 17 6V13C17 14.1046 16.1046 15 15 15H4C2.89543 15 2 14.1046 2 13V6C2 4.89543 2.89543 4 4 4ZM15 5.5H4C3.72386 5.5 3.5 5.72386 3.5 6V13C3.5 13.2761 3.72386 13.5 4 13.5H15C15.2761 13.5 15.5 13.2761 15.5 13V6C15.5 5.72386 15.2761 5.5 15 5.5ZM4.56302 16C4.78504 16.8626 5.56809 17.5 6.50001 17.5H15.5C17.7091 17.5 19.5 15.7091 19.5 13.5V8.49998C19.5 7.56806 18.8626 6.78501 18 6.56299V13.5C18 14.8807 16.8807 16 15.5 16H4.56302ZM7.06302 18.5C7.28504 19.3626 8.06809 20 9.00001 20H16.25C19.4256 20 22 17.4256 22 14.25V11C22 10.0681 21.3626 9.28501 20.5 9.06299V14.25C20.5 16.5972 18.5972 18.5 16.25 18.5H7.06302Z" 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/stack_24_regular.svg";

Details

Keywords

contentlandscapecollection