delete forever icon

delete-forever-24-filled from Fluent UI System Icons by Microsoft Corporation · 24 Filled · MIT Free for personal and commercial use.

Name
delete-forever-24-filled
Set
Fluent UI System Icons
Style
24 Filled
Viewbox
24×24
License
MIT

3 other variants in Fluent UI System Icons

delete-forever-24-regulardelete-forever-28-filleddelete-forever-28-regular

The same icon in other sets

delete-foreverMaterial Symbolsdelete-foreverMaterial Symbols Lightdelete-foreverMaterial Design Icons

Related icons in Fluent UI System Icons

delete-arrow-back-16-filleddelete-dismiss-20-filleddelete-lines-20-filleddelete-off-20-filled

Use the delete forever icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path d="M16.5 12a5.5 5.5 0 1 1 0 11a5.5 5.5 0 0 1 0-11zM12 1.5A3.5 3.5 0 0 1 15.5 5h5a1 1 0 0 1 0 2h-.845l-.451 4.587A6.5 6.5 0 0 0 11.81 22H8.312a2.75 2.75 0 0 1-2.737-2.48L4.345 7H3.5a1 1 0 1 1 0-2h5A3.5 3.5 0 0 1 12 1.5zm1.716 13.089l-.07.057l-.057.07a.5.5 0 0 0 0 .568l.057.07l2.147 2.146l-2.147 2.146l-.057.07a.5.5 0 0 0 0 .568l.057.07l.07.057a.5.5 0 0 0 .568 0l.07-.057l2.146-2.147l2.146 2.147l.07.057a.5.5 0 0 0 .568 0l.07-.057l.057-.07a.5.5 0 0 0 0-.568l-.057-.07l-2.147-2.146l2.147-2.146l.057-.07a.5.5 0 0 0 0-.568l-.057-.07l-.07-.057a.5.5 0 0 0-.568 0l-.07.057l-2.146 2.147l-2.146-2.147l-.07-.057a.5.5 0 0 0-.492-.044l-.076.044zM12 3.5A1.5 1.5 0 0 0 10.5 5h3A1.5 1.5 0 0 0 12 3.5z" fill="currentColor" fill-rule="nonzero"/></svg>

React

import type { SVGProps } from "react";

export function FluentDeleteForever24Filled(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path d="M16.5 12a5.5 5.5 0 1 1 0 11a5.5 5.5 0 0 1 0-11zM12 1.5A3.5 3.5 0 0 1 15.5 5h5a1 1 0 0 1 0 2h-.845l-.451 4.587A6.5 6.5 0 0 0 11.81 22H8.312a2.75 2.75 0 0 1-2.737-2.48L4.345 7H3.5a1 1 0 1 1 0-2h5A3.5 3.5 0 0 1 12 1.5zm1.716 13.089l-.07.057l-.057.07a.5.5 0 0 0 0 .568l.057.07l2.147 2.146l-2.147 2.146l-.057.07a.5.5 0 0 0 0 .568l.057.07l.07.057a.5.5 0 0 0 .568 0l.07-.057l2.146-2.147l2.146 2.147l.07.057a.5.5 0 0 0 .568 0l.07-.057l.057-.07a.5.5 0 0 0 0-.568l-.057-.07l-2.147-2.146l2.147-2.146l.057-.07a.5.5 0 0 0 0-.568l-.057-.07l-.07-.057a.5.5 0 0 0-.568 0l-.07.057l-2.146 2.147l-2.146-2.147l-.07-.057a.5.5 0 0 0-.492-.044l-.076.044zM12 3.5A1.5 1.5 0 0 0 10.5 5h3A1.5 1.5 0 0 0 12 3.5z" fill="currentColor" fillRule="nonzero"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path d="M16.5 12a5.5 5.5 0 1 1 0 11a5.5 5.5 0 0 1 0-11zM12 1.5A3.5 3.5 0 0 1 15.5 5h5a1 1 0 0 1 0 2h-.845l-.451 4.587A6.5 6.5 0 0 0 11.81 22H8.312a2.75 2.75 0 0 1-2.737-2.48L4.345 7H3.5a1 1 0 1 1 0-2h5A3.5 3.5 0 0 1 12 1.5zm1.716 13.089l-.07.057l-.057.07a.5.5 0 0 0 0 .568l.057.07l2.147 2.146l-2.147 2.146l-.057.07a.5.5 0 0 0 0 .568l.057.07l.07.057a.5.5 0 0 0 .568 0l.07-.057l2.146-2.147l2.146 2.147l.07.057a.5.5 0 0 0 .568 0l.07-.057l.057-.07a.5.5 0 0 0 0-.568l-.057-.07l-2.147-2.146l2.147-2.146l.057-.07a.5.5 0 0 0 0-.568l-.057-.07l-.07-.057a.5.5 0 0 0-.568 0l-.07.057l-2.146 2.147l-2.146-2.147l-.07-.057a.5.5 0 0 0-.492-.044l-.076.044zM12 3.5A1.5 1.5 0 0 0 10.5 5h3A1.5 1.5 0 0 0 12 3.5z" fill="currentColor" fill-rule="nonzero"/></svg>
</template>

CSS

.icon-delete-forever-24-filled {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16.5%2012a5.5%205.5%200%201%201%200%2011a5.5%205.5%200%200%201%200-11zM12%201.5A3.5%203.5%200%200%201%2015.5%205h5a1%201%200%200%201%200%202h-.845l-.451%204.587A6.5%206.5%200%200%200%2011.81%2022H8.312a2.75%202.75%200%200%201-2.737-2.48L4.345%207H3.5a1%201%200%201%201%200-2h5A3.5%203.5%200%200%201%2012%201.5zm1.716%2013.089l-.07.057l-.057.07a.5.5%200%200%200%200%20.568l.057.07l2.147%202.146l-2.147%202.146l-.057.07a.5.5%200%200%200%200%20.568l.057.07l.07.057a.5.5%200%200%200%20.568%200l.07-.057l2.146-2.147l2.146%202.147l.07.057a.5.5%200%200%200%20.568%200l.07-.057l.057-.07a.5.5%200%200%200%200-.568l-.057-.07l-2.147-2.146l2.147-2.146l.057-.07a.5.5%200%200%200%200-.568l-.057-.07l-.07-.057a.5.5%200%200%200-.568%200l-.07.057l-2.146%202.147l-2.146-2.147l-.07-.057a.5.5%200%200%200-.492-.044l-.076.044zM12%203.5A1.5%201.5%200%200%200%2010.5%205h3A1.5%201.5%200%200%200%2012%203.5z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16.5%2012a5.5%205.5%200%201%201%200%2011a5.5%205.5%200%200%201%200-11zM12%201.5A3.5%203.5%200%200%201%2015.5%205h5a1%201%200%200%201%200%202h-.845l-.451%204.587A6.5%206.5%200%200%200%2011.81%2022H8.312a2.75%202.75%200%200%201-2.737-2.48L4.345%207H3.5a1%201%200%201%201%200-2h5A3.5%203.5%200%200%201%2012%201.5zm1.716%2013.089l-.07.057l-.057.07a.5.5%200%200%200%200%20.568l.057.07l2.147%202.146l-2.147%202.146l-.057.07a.5.5%200%200%200%200%20.568l.057.07l.07.057a.5.5%200%200%200%20.568%200l.07-.057l2.146-2.147l2.146%202.147l.07.057a.5.5%200%200%200%20.568%200l.07-.057l.057-.07a.5.5%200%200%200%200-.568l-.057-.07l-2.147-2.146l2.147-2.146l.057-.07a.5.5%200%200%200%200-.568l-.057-.07l-.07-.057a.5.5%200%200%200-.568%200l-.07.057l-2.146%202.147l-2.146-2.147l-.07-.057a.5.5%200%200%200-.492-.044l-.076.044zM12%203.5A1.5%201.5%200%200%200%2010.5%205h3A1.5%201.5%200%200%200%2012%203.5z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/delete-forever-24-filled.svg?color=%231a73e8&size=48