coin icon
coin from BoxIcons v2 by Boxicons · Regular · MIT Free for personal and commercial use.
- Name
- coin
- Set
- BoxIcons v2
- Style
- Regular
- Viewbox
- 24×24
- License
- MIT
- Aliases
- bx-coin
The same icon in other sets
Related icons in BoxIcons v2
Use the coin icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 6C7.03 6 2 7.546 2 10.5v4C2 17.454 7.03 19 12 19s10-1.546 10-4.5v-4C22 7.546 16.97 6 12 6m-8 8.5v-1.197a10 10 0 0 0 2 .86v1.881c-1.312-.514-2-1.126-2-1.544m12 .148v1.971c-.867.179-1.867.31-3 .358v-2a22 22 0 0 0 3-.329m-5 2.33a19 19 0 0 1-3-.358v-1.971c.959.174 1.972.287 3 .33zm7-.934v-1.881a10 10 0 0 0 2-.86V14.5c0 .418-.687 1.03-2 1.544M12 13c-5.177 0-8-1.651-8-2.5S6.823 8 12 8s8 1.651 8 2.5s-2.823 2.5-8 2.5"/></svg>
React
import type { SVGProps } from "react";
export function BxCoin(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 6C7.03 6 2 7.546 2 10.5v4C2 17.454 7.03 19 12 19s10-1.546 10-4.5v-4C22 7.546 16.97 6 12 6m-8 8.5v-1.197a10 10 0 0 0 2 .86v1.881c-1.312-.514-2-1.126-2-1.544m12 .148v1.971c-.867.179-1.867.31-3 .358v-2a22 22 0 0 0 3-.329m-5 2.33a19 19 0 0 1-3-.358v-1.971c.959.174 1.972.287 3 .33zm7-.934v-1.881a10 10 0 0 0 2-.86V14.5c0 .418-.687 1.03-2 1.544M12 13c-5.177 0-8-1.651-8-2.5S6.823 8 12 8s8 1.651 8 2.5s-2.823 2.5-8 2.5"/></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 6C7.03 6 2 7.546 2 10.5v4C2 17.454 7.03 19 12 19s10-1.546 10-4.5v-4C22 7.546 16.97 6 12 6m-8 8.5v-1.197a10 10 0 0 0 2 .86v1.881c-1.312-.514-2-1.126-2-1.544m12 .148v1.971c-.867.179-1.867.31-3 .358v-2a22 22 0 0 0 3-.329m-5 2.33a19 19 0 0 1-3-.358v-1.971c.959.174 1.972.287 3 .33zm7-.934v-1.881a10 10 0 0 0 2-.86V14.5c0 .418-.687 1.03-2 1.544M12 13c-5.177 0-8-1.651-8-2.5S6.823 8 12 8s8 1.651 8 2.5s-2.823 2.5-8 2.5"/></svg> </template>
CSS
.icon-coin {
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%206C7.03%206%202%207.546%202%2010.5v4C2%2017.454%207.03%2019%2012%2019s10-1.546%2010-4.5v-4C22%207.546%2016.97%206%2012%206m-8%208.5v-1.197a10%2010%200%200%200%202%20.86v1.881c-1.312-.514-2-1.126-2-1.544m12%20.148v1.971c-.867.179-1.867.31-3%20.358v-2a22%2022%200%200%200%203-.329m-5%202.33a19%2019%200%200%201-3-.358v-1.971c.959.174%201.972.287%203%20.33zm7-.934v-1.881a10%2010%200%200%200%202-.86V14.5c0%20.418-.687%201.03-2%201.544M12%2013c-5.177%200-8-1.651-8-2.5S6.823%208%2012%208s8%201.651%208%202.5s-2.823%202.5-8%202.5%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%206C7.03%206%202%207.546%202%2010.5v4C2%2017.454%207.03%2019%2012%2019s10-1.546%2010-4.5v-4C22%207.546%2016.97%206%2012%206m-8%208.5v-1.197a10%2010%200%200%200%202%20.86v1.881c-1.312-.514-2-1.126-2-1.544m12%20.148v1.971c-.867.179-1.867.31-3%20.358v-2a22%2022%200%200%200%203-.329m-5%202.33a19%2019%200%200%201-3-.358v-1.971c.959.174%201.972.287%203%20.33zm7-.934v-1.881a10%2010%200%200%200%202-.86V14.5c0%20.418-.687%201.03-2%201.544M12%2013c-5.177%200-8-1.651-8-2.5S6.823%208%2012%208s8%201.651%208%202.5s-2.823%202.5-8%202.5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/bx/coin.svg?color=%231a73e8&size=48
