Delete Dismiss icon

Use the Delete Dismiss 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 { DeleteDismiss24Regular, DeleteDismiss24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DeleteDismiss24Regular aria-label="Delete Dismiss" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_delete_dismiss_24_regular.svg" width="24" height="24" alt="Delete Dismiss">

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 5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5H14ZM8.5 5C8.5 3.067 10.067 1.5 12 1.5C13.933 1.5 15.5 3.067 15.5 5H21.25C21.6642 5 22 5.33579 22 5.75C22 6.16421 21.6642 6.5 21.25 6.5H19.9309L19.4281 11.6953C18.9712 11.4644 18.4833 11.2858 17.9722 11.1674L18.4239 6.5H5.57608L6.73416 18.4667C6.84577 19.62 7.815 20.5 8.97369 20.5H10.7322C11.0194 21.051 11.3832 21.5557 11.8096 22H8.97369C7.04254 22 5.42715 20.5334 5.24113 18.6112L4.06908 6.5H2.75C2.33579 6.5 2 6.16421 2 5.75C2 5.33579 2.33579 5 2.75 5H8.5ZM22 17.5C22 20.5376 19.5376 23 16.5 23C13.4624 23 11 20.5376 11 17.5C11 14.4624 13.4624 12 16.5 12C19.5376 12 22 14.4624 22 17.5ZM14.8536 15.1464C14.6583 14.9512 14.3417 14.9512 14.1464 15.1464C13.9512 15.3417 13.9512 15.6583 14.1464 15.8536L15.7929 17.5L14.1464 19.1464C13.9512 19.3417 13.9512 19.6583 14.1464 19.8536C14.3417 20.0488 14.6583 20.0488 14.8536 19.8536L16.5 18.2071L18.1464 19.8536C18.3417 20.0488 18.6583 20.0488 18.8536 19.8536C19.0488 19.6583 19.0488 19.3417 18.8536 19.1464L17.2071 17.5L18.8536 15.8536C19.0488 15.6583 19.0488 15.3417 18.8536 15.1464C18.6583 14.9512 18.3417 14.9512 18.1464 15.1464L16.5 16.7929L14.8536 15.1464Z" 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/delete_dismiss_24_regular.svg";

Details

Keywords

trashcanremoveeditbyee