Tray Item Remove icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_tray_item_remove_24_regular.svg" width="24" height="24" alt="Tray Item Remove">

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.2197 8.71967C15.5126 8.42678 15.9874 8.42678 16.2803 8.71967L18.7803 11.2197C19.0732 11.5126 19.0732 11.9874 18.7803 12.2803C18.4874 12.5732 18.0126 12.5732 17.7197 12.2803L16.5 11.0607V17.75C16.5 18.1642 16.1642 18.5 15.75 18.5C15.3358 18.5 15 18.1642 15 17.75V11.0607L13.7803 12.2803C13.4874 12.5732 13.0126 12.5732 12.7197 12.2803C12.4268 11.9874 12.4268 11.5126 12.7197 11.2197L15.2197 8.71967ZM6.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_remove_24_regular.svg";

Details

Keywords

unloadloadcontainershippingmanufacturing