cancel icon

cancel-fill from Mage Icons by MageIcons · Fill · Apache-2.0 Free for personal and commercial use.

Name: cancel-fill
Set: Mage Icons
Style: Fill
Viewbox: 24×24
License: Apache 2.0

1 other variant in Mage Icons

The same icon in other sets

cancelFont Awesome Solid cancelHealth Icons cancelMaterial Line Icons cancelMaterial Symbols cancelMaterial Symbols Light cancelMaterial Design Icons 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 1.75A10.25 10.25 0 1 0 22.25 12A10.18 10.18 0 0 0 12 1.75m6.69 15.89L6.37 5.31a8.75 8.75 0 0 1 12.32 12.33"/></svg>

React

import type { SVGProps } from "react";

export function MageCancelFill(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 1.75A10.25 10.25 0 1 0 22.25 12A10.18 10.18 0 0 0 12 1.75m6.69 15.89L6.37 5.31a8.75 8.75 0 0 1 12.32 12.33"/></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 1.75A10.25 10.25 0 1 0 22.25 12A10.18 10.18 0 0 0 12 1.75m6.69 15.89L6.37 5.31a8.75 8.75 0 0 1 12.32 12.33"/></svg>
</template>

CSS

.icon-cancel-fill {
  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%201.75A10.25%2010.25%200%201%200%2022.25%2012A10.18%2010.18%200%200%200%2012%201.75m6.69%2015.89L6.37%205.31a8.75%208.75%200%200%201%2012.32%2012.33%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%201.75A10.25%2010.25%200%201%200%2022.25%2012A10.18%2010.18%200%200%200%2012%201.75m6.69%2015.89L6.37%205.31a8.75%208.75%200%200%201%2012.32%2012.33%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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