x diamond icon

x-diamond from Bootstrap Icons by The Bootstrap Authors · Outline · MIT Free for personal and commercial use.

Name
x-diamond
Set
Bootstrap Icons
Style
Outline
Viewbox
16×16
License
MIT

1 other variant in Bootstrap Icons

x-diamond-fill

The same icon in other sets

x-diamondMyna UI Icons

Related icons in Bootstrap Icons

x-circlex-lgx-octagonx-square

Use the x diamond icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M7.987 16a1.53 1.53 0 0 1-1.07-.448L.45 9.082a1.53 1.53 0 0 1 0-2.165L6.917.45a1.53 1.53 0 0 1 2.166 0l6.469 6.468A1.53 1.53 0 0 1 16 8.013a1.53 1.53 0 0 1-.448 1.07l-6.47 6.469A1.53 1.53 0 0 1 7.988 16zM7.639 1.17L4.766 4.044L8 7.278l3.234-3.234L8.361 1.17a.51.51 0 0 0-.722 0M8.722 8l3.234 3.234l2.873-2.873c.2-.2.2-.523 0-.722l-2.873-2.873zM8 8.722l-3.234 3.234l2.873 2.873c.2.2.523.2.722 0l2.873-2.873zM7.278 8L4.044 4.766L1.17 7.639a.51.51 0 0 0 0 .722l2.874 2.873z"/></svg>

React

import type { SVGProps } from "react";

export function BiXDiamond(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M7.987 16a1.53 1.53 0 0 1-1.07-.448L.45 9.082a1.53 1.53 0 0 1 0-2.165L6.917.45a1.53 1.53 0 0 1 2.166 0l6.469 6.468A1.53 1.53 0 0 1 16 8.013a1.53 1.53 0 0 1-.448 1.07l-6.47 6.469A1.53 1.53 0 0 1 7.988 16zM7.639 1.17L4.766 4.044L8 7.278l3.234-3.234L8.361 1.17a.51.51 0 0 0-.722 0M8.722 8l3.234 3.234l2.873-2.873c.2-.2.2-.523 0-.722l-2.873-2.873zM8 8.722l-3.234 3.234l2.873 2.873c.2.2.523.2.722 0l2.873-2.873zM7.278 8L4.044 4.766L1.17 7.639a.51.51 0 0 0 0 .722l2.874 2.873z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M7.987 16a1.53 1.53 0 0 1-1.07-.448L.45 9.082a1.53 1.53 0 0 1 0-2.165L6.917.45a1.53 1.53 0 0 1 2.166 0l6.469 6.468A1.53 1.53 0 0 1 16 8.013a1.53 1.53 0 0 1-.448 1.07l-6.47 6.469A1.53 1.53 0 0 1 7.988 16zM7.639 1.17L4.766 4.044L8 7.278l3.234-3.234L8.361 1.17a.51.51 0 0 0-.722 0M8.722 8l3.234 3.234l2.873-2.873c.2-.2.2-.523 0-.722l-2.873-2.873zM8 8.722l-3.234 3.234l2.873 2.873c.2.2.523.2.722 0l2.873-2.873zM7.278 8L4.044 4.766L1.17 7.639a.51.51 0 0 0 0 .722l2.874 2.873z"/></svg>
</template>

CSS

.icon-x-diamond {
  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%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M7.987%2016a1.53%201.53%200%200%201-1.07-.448L.45%209.082a1.53%201.53%200%200%201%200-2.165L6.917.45a1.53%201.53%200%200%201%202.166%200l6.469%206.468A1.53%201.53%200%200%201%2016%208.013a1.53%201.53%200%200%201-.448%201.07l-6.47%206.469A1.53%201.53%200%200%201%207.988%2016zM7.639%201.17L4.766%204.044L8%207.278l3.234-3.234L8.361%201.17a.51.51%200%200%200-.722%200M8.722%208l3.234%203.234l2.873-2.873c.2-.2.2-.523%200-.722l-2.873-2.873zM8%208.722l-3.234%203.234l2.873%202.873c.2.2.523.2.722%200l2.873-2.873zM7.278%208L4.044%204.766L1.17%207.639a.51.51%200%200%200%200%20.722l2.874%202.873z%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%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M7.987%2016a1.53%201.53%200%200%201-1.07-.448L.45%209.082a1.53%201.53%200%200%201%200-2.165L6.917.45a1.53%201.53%200%200%201%202.166%200l6.469%206.468A1.53%201.53%200%200%201%2016%208.013a1.53%201.53%200%200%201-.448%201.07l-6.47%206.469A1.53%201.53%200%200%201%207.988%2016zM7.639%201.17L4.766%204.044L8%207.278l3.234-3.234L8.361%201.17a.51.51%200%200%200-.722%200M8.722%208l3.234%203.234l2.873-2.873c.2-.2.2-.523%200-.722l-2.873-2.873zM8%208.722l-3.234%203.234l2.873%202.873c.2.2.523.2.722%200l2.873-2.873zM7.278%208L4.044%204.766L1.17%207.639a.51.51%200%200%200%200%20.722l2.874%202.873z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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