Stack Add icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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 7.5C12 4.46243 9.53757 2 6.5 2C3.46243 2 1 4.46243 1 7.5C1 10.5376 3.46243 13 6.5 13C9.53757 13 12 10.5376 12 7.5ZM7.00065 8.00001L7.00111 10.5035C7.00111 10.7797 6.77725 11.0035 6.50111 11.0035C6.22497 11.0035 6.00111 10.7797 6.00111 10.5035L6.00065 8.00001H3.4956C3.21973 8.00001 2.99609 7.77615 2.99609 7.50001C2.99609 7.22387 3.21973 7.00001 3.4956 7.00001H6.00046L6 4.49927C6 4.22313 6.22386 3.99927 6.5 3.99927C6.77614 3.99927 7 4.22313 7 4.49927L7.00046 7.00001H9.49659C9.77246 7.00001 9.99609 7.22387 9.99609 7.50001C9.99609 7.77615 9.77246 8.00001 9.49659 8.00001H7.00065ZM15 6.5H12.9236C12.8428 5.97679 12.6996 5.47417 12.5018 5H15C16.1046 5 17 5.89543 17 7V14C17 15.1046 16.1046 16 15 16H4C2.89543 16 2 15.1046 2 14V12.1904C2.44427 12.6168 2.94898 12.9806 3.5 13.2678V14C3.5 14.2761 3.72386 14.5 4 14.5H15C15.2761 14.5 15.5 14.2761 15.5 14V7C15.5 6.72386 15.2761 6.5 15 6.5ZM4.56302 17C4.78504 17.8626 5.56809 18.5 6.50001 18.5H15.5C17.7091 18.5 19.5 16.7091 19.5 14.5V9.49998C19.5 8.56806 18.8626 7.78501 18 7.56299V14.5C18 15.8807 16.8807 17 15.5 17H4.56302ZM7.06302 19.5C7.28504 20.3626 8.06809 21 9.00001 21H16.25C19.4256 21 22 18.4256 22 15.25V12C22 11.0681 21.3626 10.285 20.5 10.063V15.25C20.5 17.5972 18.5972 19.5 16.25 19.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_add_24_regular.svg";

Details

Keywords

contentlandscapecollectionaddmoreplus