cancel icon

cancel from Material Design Icons by Pictogrammers · Filled · Apache-2.0 Free for personal and commercial use.

Name: cancel
Set: Material Design Icons
Style: Filled
Viewbox: 24×24
License: Apache 2.0
Aliases: ban, block, denied, do-not-disturb-alt, forbid, no, prohibited

The same icon in other sets

cancelFont Awesome Solid cancelHealth Icons cancelMaterial Line Icons cancelMage Icons cancelMaterial Symbols cancelMaterial Symbols Light cancelPixelarticons cancelTabler Icons cancelUnicons

Use the cancel icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 12S6.5 2 12 2m0 2c-1.9 0-3.6.6-4.9 1.7l11.2 11.2c1-1.4 1.7-3.1 1.7-4.9c0-4.4-3.6-8-8-8m4.9 14.3L5.7 7.1C4.6 8.4 4 10.1 4 12c0 4.4 3.6 8 8 8c1.9 0 3.6-.6 4.9-1.7"/></svg>

React

import type { SVGProps } from "react";

export function MdiCancel(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 12S6.5 2 12 2m0 2c-1.9 0-3.6.6-4.9 1.7l11.2 11.2c1-1.4 1.7-3.1 1.7-4.9c0-4.4-3.6-8-8-8m4.9 14.3L5.7 7.1C4.6 8.4 4 10.1 4 12c0 4.4 3.6 8 8 8c1.9 0 3.6-.6 4.9-1.7"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 12S6.5 2 12 2m0 2c-1.9 0-3.6.6-4.9 1.7l11.2 11.2c1-1.4 1.7-3.1 1.7-4.9c0-4.4-3.6-8-8-8m4.9 14.3L5.7 7.1C4.6 8.4 4 10.1 4 12c0 4.4 3.6 8 8 8c1.9 0 3.6-.6 4.9-1.7"/></svg>
</template>

CSS

.icon-cancel {
  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%20fill%3D%22currentColor%22%20d%3D%22M12%202c5.5%200%2010%204.5%2010%2010s-4.5%2010-10%2010S2%2017.5%202%2012S6.5%202%2012%202m0%202c-1.9%200-3.6.6-4.9%201.7l11.2%2011.2c1-1.4%201.7-3.1%201.7-4.9c0-4.4-3.6-8-8-8m4.9%2014.3L5.7%207.1C4.6%208.4%204%2010.1%204%2012c0%204.4%203.6%208%208%208c1.9%200%203.6-.6%204.9-1.7%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%20fill%3D%22currentColor%22%20d%3D%22M12%202c5.5%200%2010%204.5%2010%2010s-4.5%2010-10%2010S2%2017.5%202%2012S6.5%202%2012%202m0%202c-1.9%200-3.6.6-4.9%201.7l11.2%2011.2c1-1.4%201.7-3.1%201.7-4.9c0-4.4-3.6-8-8-8m4.9%2014.3L5.7%207.1C4.6%208.4%204%2010.1%204%2012c0%204.4%203.6%208%208%208c1.9%200%203.6-.6%204.9-1.7%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mdi/cancel.svg?color=%231a73e8&size=48