clear icon

clear-fill from Framework7 Icons by Vladimir Kharlampidi · Fill · MIT Free for personal and commercial use.

Name: clear-fill
Set: Framework7 Icons
Style: Fill
Viewbox: 56×56
License: MIT

1 other variant in Framework7 Icons

The same icon in other sets

clear-outlinedAnt Design Icons clearIconPark clearIconPark Outline clearIconPark Solid clearIconPark TwoTone clearTDesign Icons

Use the clear icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M13.785 49.574h28.453c4.899 0 7.336-2.437 7.336-7.265V13.69c0-4.828-2.437-7.265-7.336-7.265H13.785c-4.875 0-7.36 2.414-7.36 7.265v28.62c0 4.851 2.485 7.265 7.36 7.265m5.906-11.203c-1.148 0-2.109-.937-2.109-2.086c0-.539.234-1.054.656-1.476l6.797-6.844l-6.797-6.82c-.422-.422-.656-.938-.656-1.477c0-1.172.96-2.133 2.11-2.133q.843 0 1.476.633l6.844 6.844l6.843-6.844a1.97 1.97 0 0 1 1.454-.633a2.14 2.14 0 0 1 2.132 2.133c0 .54-.234 1.055-.656 1.477l-6.82 6.82l6.82 6.844c.422.422.656.937.656 1.476c0 1.149-.96 2.086-2.133 2.086c-.538 0-1.054-.21-1.43-.586l-6.866-6.89l-6.868 6.89a2.04 2.04 0 0 1-1.453.586"/></svg>

React

import type { SVGProps } from "react";

export function F7ClearFill(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M13.785 49.574h28.453c4.899 0 7.336-2.437 7.336-7.265V13.69c0-4.828-2.437-7.265-7.336-7.265H13.785c-4.875 0-7.36 2.414-7.36 7.265v28.62c0 4.851 2.485 7.265 7.36 7.265m5.906-11.203c-1.148 0-2.109-.937-2.109-2.086c0-.539.234-1.054.656-1.476l6.797-6.844l-6.797-6.82c-.422-.422-.656-.938-.656-1.477c0-1.172.96-2.133 2.11-2.133q.843 0 1.476.633l6.844 6.844l6.843-6.844a1.97 1.97 0 0 1 1.454-.633a2.14 2.14 0 0 1 2.132 2.133c0 .54-.234 1.055-.656 1.477l-6.82 6.82l6.82 6.844c.422.422.656.937.656 1.476c0 1.149-.96 2.086-2.133 2.086c-.538 0-1.054-.21-1.43-.586l-6.866-6.89l-6.868 6.89a2.04 2.04 0 0 1-1.453.586"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M13.785 49.574h28.453c4.899 0 7.336-2.437 7.336-7.265V13.69c0-4.828-2.437-7.265-7.336-7.265H13.785c-4.875 0-7.36 2.414-7.36 7.265v28.62c0 4.851 2.485 7.265 7.36 7.265m5.906-11.203c-1.148 0-2.109-.937-2.109-2.086c0-.539.234-1.054.656-1.476l6.797-6.844l-6.797-6.82c-.422-.422-.656-.938-.656-1.477c0-1.172.96-2.133 2.11-2.133q.843 0 1.476.633l6.844 6.844l6.843-6.844a1.97 1.97 0 0 1 1.454-.633a2.14 2.14 0 0 1 2.132 2.133c0 .54-.234 1.055-.656 1.477l-6.82 6.82l6.82 6.844c.422.422.656.937.656 1.476c0 1.149-.96 2.086-2.133 2.086c-.538 0-1.054-.21-1.43-.586l-6.866-6.89l-6.868 6.89a2.04 2.04 0 0 1-1.453.586"/></svg>
</template>

CSS

.icon-clear-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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M13.785%2049.574h28.453c4.899%200%207.336-2.437%207.336-7.265V13.69c0-4.828-2.437-7.265-7.336-7.265H13.785c-4.875%200-7.36%202.414-7.36%207.265v28.62c0%204.851%202.485%207.265%207.36%207.265m5.906-11.203c-1.148%200-2.109-.937-2.109-2.086c0-.539.234-1.054.656-1.476l6.797-6.844l-6.797-6.82c-.422-.422-.656-.938-.656-1.477c0-1.172.96-2.133%202.11-2.133q.843%200%201.476.633l6.844%206.844l6.843-6.844a1.97%201.97%200%200%201%201.454-.633a2.14%202.14%200%200%201%202.132%202.133c0%20.54-.234%201.055-.656%201.477l-6.82%206.82l6.82%206.844c.422.422.656.937.656%201.476c0%201.149-.96%202.086-2.133%202.086c-.538%200-1.054-.21-1.43-.586l-6.866-6.89l-6.868%206.89a2.04%202.04%200%200%201-1.453.586%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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M13.785%2049.574h28.453c4.899%200%207.336-2.437%207.336-7.265V13.69c0-4.828-2.437-7.265-7.336-7.265H13.785c-4.875%200-7.36%202.414-7.36%207.265v28.62c0%204.851%202.485%207.265%207.36%207.265m5.906-11.203c-1.148%200-2.109-.937-2.109-2.086c0-.539.234-1.054.656-1.476l6.797-6.844l-6.797-6.82c-.422-.422-.656-.938-.656-1.477c0-1.172.96-2.133%202.11-2.133q.843%200%201.476.633l6.844%206.844l6.843-6.844a1.97%201.97%200%200%201%201.454-.633a2.14%202.14%200%200%201%202.132%202.133c0%20.54-.234%201.055-.656%201.477l-6.82%206.82l6.82%206.844c.422.422.656.937.656%201.476c0%201.149-.96%202.086-2.133%202.086c-.538%200-1.054-.21-1.43-.586l-6.866-6.89l-6.868%206.89a2.04%202.04%200%200%201-1.453.586%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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