Beta

Delete Button SVG element, flat

Free

A lidded trash can with two vertical slits marks this rounded button. Use it beside a saved draft or in a file manager.

Sign in to download. Free SVGs are free with any account.

deleteremovetrashdiscardbuttonselementflat

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/RMkWkrexo6-i/amnt.svg" alt="Delete Button" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 80" preserveAspectRatio="none" fill="currentColor"><rect x="4" y="5" width="232" height="70" rx="18" fill="none" stroke="currentColor" stroke-width="5"/><path d="M110 22h20a3 3 0 0 1 3 3v2h5a3 3 0 0 1 0 6h-36a3 3 0 0 1 0-6h5v-2a3 3 0 0 1 3-3Zm3 5h14v-1h-14Z" fill-rule="evenodd"/><path d="M104 36h32l-2 23a5 5 0 0 1-5 5h-18a5 5 0 0 1-5-5Zm11 6a2 2 0 0 0-2 2v12a2 2 0 0 0 4 0V44a2 2 0 0 0-2-2Zm10 0a2 2 0 0 0-2 2v12a2 2 0 0 0 4 0V44a2 2 0 0 0-2-2Z" fill-rule="evenodd"/></svg>
CSS background-image
.delete-button {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/RMkWkrexo6-i/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.delete-button {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/RMkWkrexo6-i/amnt.svg") center / contain no-repeat;
}
React
import DeleteButtonSvg from "./delete-button.jsx"; // from the React tab above

<DeleteButtonSvg width={48} height={48} />

Made with AMNT

AMNT SVG 1.1 drew this from the words Delete Button: Wide rounded button with a lidded trash can and two vertical slits. as part of the pack Website Buttons, Flat. Want one like it? Make your own in the SVG studio.

Rest of Website Buttons, Flat

Whole pack

Similar SVGs

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence