dice icon

dice from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.

Name: dice
Set: IonIcons
Style: Regular
Viewbox: 512×512
License: MIT

2 other variants in IonIcons

The same icon in other sets

diceFont Awesome 6 Solid diceFont Awesome Solid diceHuge Icons diceJam Icons diceLine Awesome diceMaterial Design Icons dice-16Octicons dicePixelarticons dice-fillRemix Icon diceTabler Icons

Use the dice icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M440.88 129.37L288.16 40.62a64.14 64.14 0 0 0-64.33 0L71.12 129.37a4 4 0 0 0 0 6.9L254 243.85a4 4 0 0 0 4.06 0L440.9 136.27a4 4 0 0 0-.02-6.9M256 152c-13.25 0-24-7.16-24-16s10.75-16 24-16s24 7.16 24 16s-10.75 16-24 16m-18 118.81L54 163.48a4 4 0 0 0-6 3.46v173.92a48 48 0 0 0 23.84 41.39L234 479.48a4 4 0 0 0 6-3.46V274.27a4 4 0 0 0-2-3.46M96 368c-8.84 0-16-10.75-16-24s7.16-24 16-24s16 10.75 16 24s-7.16 24-16 24m96-32c-8.84 0-16-10.75-16-24s7.16-24 16-24s16 10.75 16 24s-7.16 24-16 24m266-172.49L274 271.56a4 4 0 0 0-2 3.45V476a4 4 0 0 0 6 3.46l162.15-97.23A48 48 0 0 0 464 340.86V167a4 4 0 0 0-6-3.49M320 424c-8.84 0-16-10.75-16-24s7.16-24 16-24s16 10.75 16 24s-7.16 24-16 24m0-88c-8.84 0-16-10.75-16-24s7.16-24 16-24s16 10.75 16 24s-7.16 24-16 24m96 32c-8.84 0-16-10.75-16-24s7.16-24 16-24s16 10.75 16 24s-7.16 24-16 24m0-88c-8.84 0-16-10.75-16-24s7.16-24 16-24s16 10.75 16 24s-7.16 24-16 24"/></svg>

React

import type { SVGProps } from "react";

export function IonDice(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M440.88 129.37L288.16 40.62a64.14 64.14 0 0 0-64.33 0L71.12 129.37a4 4 0 0 0 0 6.9L254 243.85a4 4 0 0 0 4.06 0L440.9 136.27a4 4 0 0 0-.02-6.9M256 152c-13.25 0-24-7.16-24-16s10.75-16 24-16s24 7.16 24 16s-10.75 16-24 16m-18 118.81L54 163.48a4 4 0 0 0-6 3.46v173.92a48 48 0 0 0 23.84 41.39L234 479.48a4 4 0 0 0 6-3.46V274.27a4 4 0 0 0-2-3.46M96 368c-8.84 0-16-10.75-16-24s7.16-24 16-24s16 10.75 16 24s-7.16 24-16 24m96-32c-8.84 0-16-10.75-16-24s7.16-24 16-24s16 10.75 16 24s-7.16 24-16 24m266-172.49L274 271.56a4 4 0 0 0-2 3.45V476a4 4 0 0 0 6 3.46l162.15-97.23A48 48 0 0 0 464 340.86V167a4 4 0 0 0-6-3.49M320 424c-8.84 0-16-10.75-16-24s7.16-24 16-24s16 10.75 16 24s-7.16 24-16 24m0-88c-8.84 0-16-10.75-16-24s7.16-24 16-24s16 10.75 16 24s-7.16 24-16 24m96 32c-8.84 0-16-10.75-16-24s7.16-24 16-24s16 10.75 16 24s-7.16 24-16 24m0-88c-8.84 0-16-10.75-16-24s7.16-24 16-24s16 10.75 16 24s-7.16 24-16 24"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M440.88 129.37L288.16 40.62a64.14 64.14 0 0 0-64.33 0L71.12 129.37a4 4 0 0 0 0 6.9L254 243.85a4 4 0 0 0 4.06 0L440.9 136.27a4 4 0 0 0-.02-6.9M256 152c-13.25 0-24-7.16-24-16s10.75-16 24-16s24 7.16 24 16s-10.75 16-24 16m-18 118.81L54 163.48a4 4 0 0 0-6 3.46v173.92a48 48 0 0 0 23.84 41.39L234 479.48a4 4 0 0 0 6-3.46V274.27a4 4 0 0 0-2-3.46M96 368c-8.84 0-16-10.75-16-24s7.16-24 16-24s16 10.75 16 24s-7.16 24-16 24m96-32c-8.84 0-16-10.75-16-24s7.16-24 16-24s16 10.75 16 24s-7.16 24-16 24m266-172.49L274 271.56a4 4 0 0 0-2 3.45V476a4 4 0 0 0 6 3.46l162.15-97.23A48 48 0 0 0 464 340.86V167a4 4 0 0 0-6-3.49M320 424c-8.84 0-16-10.75-16-24s7.16-24 16-24s16 10.75 16 24s-7.16 24-16 24m0-88c-8.84 0-16-10.75-16-24s7.16-24 16-24s16 10.75 16 24s-7.16 24-16 24m96 32c-8.84 0-16-10.75-16-24s7.16-24 16-24s16 10.75 16 24s-7.16 24-16 24m0-88c-8.84 0-16-10.75-16-24s7.16-24 16-24s16 10.75 16 24s-7.16 24-16 24"/></svg>
</template>

CSS

.icon-dice {
  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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M440.88%20129.37L288.16%2040.62a64.14%2064.14%200%200%200-64.33%200L71.12%20129.37a4%204%200%200%200%200%206.9L254%20243.85a4%204%200%200%200%204.06%200L440.9%20136.27a4%204%200%200%200-.02-6.9M256%20152c-13.25%200-24-7.16-24-16s10.75-16%2024-16s24%207.16%2024%2016s-10.75%2016-24%2016m-18%20118.81L54%20163.48a4%204%200%200%200-6%203.46v173.92a48%2048%200%200%200%2023.84%2041.39L234%20479.48a4%204%200%200%200%206-3.46V274.27a4%204%200%200%200-2-3.46M96%20368c-8.84%200-16-10.75-16-24s7.16-24%2016-24s16%2010.75%2016%2024s-7.16%2024-16%2024m96-32c-8.84%200-16-10.75-16-24s7.16-24%2016-24s16%2010.75%2016%2024s-7.16%2024-16%2024m266-172.49L274%20271.56a4%204%200%200%200-2%203.45V476a4%204%200%200%200%206%203.46l162.15-97.23A48%2048%200%200%200%20464%20340.86V167a4%204%200%200%200-6-3.49M320%20424c-8.84%200-16-10.75-16-24s7.16-24%2016-24s16%2010.75%2016%2024s-7.16%2024-16%2024m0-88c-8.84%200-16-10.75-16-24s7.16-24%2016-24s16%2010.75%2016%2024s-7.16%2024-16%2024m96%2032c-8.84%200-16-10.75-16-24s7.16-24%2016-24s16%2010.75%2016%2024s-7.16%2024-16%2024m0-88c-8.84%200-16-10.75-16-24s7.16-24%2016-24s16%2010.75%2016%2024s-7.16%2024-16%2024%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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M440.88%20129.37L288.16%2040.62a64.14%2064.14%200%200%200-64.33%200L71.12%20129.37a4%204%200%200%200%200%206.9L254%20243.85a4%204%200%200%200%204.06%200L440.9%20136.27a4%204%200%200%200-.02-6.9M256%20152c-13.25%200-24-7.16-24-16s10.75-16%2024-16s24%207.16%2024%2016s-10.75%2016-24%2016m-18%20118.81L54%20163.48a4%204%200%200%200-6%203.46v173.92a48%2048%200%200%200%2023.84%2041.39L234%20479.48a4%204%200%200%200%206-3.46V274.27a4%204%200%200%200-2-3.46M96%20368c-8.84%200-16-10.75-16-24s7.16-24%2016-24s16%2010.75%2016%2024s-7.16%2024-16%2024m96-32c-8.84%200-16-10.75-16-24s7.16-24%2016-24s16%2010.75%2016%2024s-7.16%2024-16%2024m266-172.49L274%20271.56a4%204%200%200%200-2%203.45V476a4%204%200%200%200%206%203.46l162.15-97.23A48%2048%200%200%200%20464%20340.86V167a4%204%200%200%200-6-3.49M320%20424c-8.84%200-16-10.75-16-24s7.16-24%2016-24s16%2010.75%2016%2024s-7.16%2024-16%2024m0-88c-8.84%200-16-10.75-16-24s7.16-24%2016-24s16%2010.75%2016%2024s-7.16%2024-16%2024m96%2032c-8.84%200-16-10.75-16-24s7.16-24%2016-24s16%2010.75%2016%2024s-7.16%2024-16%2024m0-88c-8.84%200-16-10.75-16-24s7.16-24%2016-24s16%2010.75%2016%2024s-7.16%2024-16%2024%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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