Tray Item Add icon

Use the Tray Item 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 { TrayItemAdd24Regular, TrayItemAdd24Filled } from "@fluentui/react-icons";

export function Example() {
  return <TrayItemAdd24Regular aria-label="Tray Item Add" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_tray_item_add_24_regular.svg" width="24" height="24" alt="Tray Item 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="M14 3.5V5.5H17.5V3.5H14ZM12.5 3.25C12.5 2.55964 13.0596 2 13.75 2H17.75C18.4404 2 19 2.55964 19 3.25V5.75C19 6.44036 18.4404 7 17.75 7H13.75C13.0596 7 12.5 6.44036 12.5 5.75V3.25ZM15.75 8.5C16.1642 8.5 16.5 8.83579 16.5 9.25V15.9393L17.7197 14.7197C18.0126 14.4268 18.4874 14.4268 18.7803 14.7197C19.0732 15.0126 19.0732 15.4874 18.7803 15.7803L16.2803 18.2803C15.9874 18.5732 15.5126 18.5732 15.2197 18.2803L12.7197 15.7803C12.4268 15.4874 12.4268 15.0126 12.7197 14.7197C13.0126 14.4268 13.4874 14.4268 13.7803 14.7197L15 15.9393V9.25C15 8.83579 15.3358 8.5 15.75 8.5ZM6.5 15V17H10V15H6.5ZM5 14.75C5 14.0596 5.55964 13.5 6.25 13.5H10.25C10.9404 13.5 11.5 14.0596 11.5 14.75V17.25C11.5 17.9404 10.9404 18.5 10.25 18.5H6.25C5.55964 18.5 5 17.9404 5 17.25V14.75ZM2.75 16C3.16421 16 3.5 16.3358 3.5 16.75V18.75C3.5 19.4404 4.05964 20 4.75 20H19.25C19.9404 20 20.5 19.4404 20.5 18.75V16.75C20.5 16.3358 20.8358 16 21.25 16C21.6642 16 22 16.3358 22 16.75V18.75C22 20.2688 20.7688 21.5 19.25 21.5H4.75C3.23122 21.5 2 20.2688 2 18.75V16.75C2 16.3358 2.33579 16 2.75 16Z" 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/tray_item_add_24_regular.svg";

Details

Keywords

unloadloadcontainershippingmanufacturing