hockey puck icon
hockey-puck from Line Awesome by Icons8 · Line · Sports · Apache-2.0 Free for personal and commercial use.
- Name
- hockey-puck
- Set
- Line Awesome
- Style
- Line
- Category
- Sports
- Viewbox
- 32×32
- License
- Apache 2.0
- Aliases
- hockey-puck-solid
The same icon in other sets
More sports icons from Line Awesome
Use the hockey puck icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 7C9.043 7 2 8.718 2 12v8c0 3.282 7.043 5 14 5s14-1.718 14-5v-8c0-3.282-7.043-5-14-5m0 2c7.444 0 12 1.942 12 3c0 .926-3.489 2.528-9.348 2.914A40 40 0 0 1 16 15c-7.444 0-12-1.942-12-3s4.556-3 12-3M4 14.707c.06.035.134.064.195.098a10 10 0 0 0 1.014.486c.346.144.706.282 1.094.408c.813.265 1.725.48 2.681.664c.289.055.587.1.885.147q1.274.207 2.633.324c1.15.098 2.319.166 3.498.166s2.349-.068 3.498-.166a35 35 0 0 0 2.633-.324c.298-.047.596-.092.885-.147c.956-.184 1.868-.4 2.681-.664a15 15 0 0 0 1.395-.539a10 10 0 0 0 .713-.355c.061-.034.136-.063.195-.098V20c0 1.058-4.556 3-12 3S4 21.058 4 20z"/></svg>
React
import type { SVGProps } from "react";
export function LaHockeyPuck(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 7C9.043 7 2 8.718 2 12v8c0 3.282 7.043 5 14 5s14-1.718 14-5v-8c0-3.282-7.043-5-14-5m0 2c7.444 0 12 1.942 12 3c0 .926-3.489 2.528-9.348 2.914A40 40 0 0 1 16 15c-7.444 0-12-1.942-12-3s4.556-3 12-3M4 14.707c.06.035.134.064.195.098a10 10 0 0 0 1.014.486c.346.144.706.282 1.094.408c.813.265 1.725.48 2.681.664c.289.055.587.1.885.147q1.274.207 2.633.324c1.15.098 2.319.166 3.498.166s2.349-.068 3.498-.166a35 35 0 0 0 2.633-.324c.298-.047.596-.092.885-.147c.956-.184 1.868-.4 2.681-.664a15 15 0 0 0 1.395-.539a10 10 0 0 0 .713-.355c.061-.034.136-.063.195-.098V20c0 1.058-4.556 3-12 3S4 21.058 4 20z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 7C9.043 7 2 8.718 2 12v8c0 3.282 7.043 5 14 5s14-1.718 14-5v-8c0-3.282-7.043-5-14-5m0 2c7.444 0 12 1.942 12 3c0 .926-3.489 2.528-9.348 2.914A40 40 0 0 1 16 15c-7.444 0-12-1.942-12-3s4.556-3 12-3M4 14.707c.06.035.134.064.195.098a10 10 0 0 0 1.014.486c.346.144.706.282 1.094.408c.813.265 1.725.48 2.681.664c.289.055.587.1.885.147q1.274.207 2.633.324c1.15.098 2.319.166 3.498.166s2.349-.068 3.498-.166a35 35 0 0 0 2.633-.324c.298-.047.596-.092.885-.147c.956-.184 1.868-.4 2.681-.664a15 15 0 0 0 1.395-.539a10 10 0 0 0 .713-.355c.061-.034.136-.063.195-.098V20c0 1.058-4.556 3-12 3S4 21.058 4 20z"/></svg> </template>
CSS
.icon-hockey-puck {
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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16%207C9.043%207%202%208.718%202%2012v8c0%203.282%207.043%205%2014%205s14-1.718%2014-5v-8c0-3.282-7.043-5-14-5m0%202c7.444%200%2012%201.942%2012%203c0%20.926-3.489%202.528-9.348%202.914A40%2040%200%200%201%2016%2015c-7.444%200-12-1.942-12-3s4.556-3%2012-3M4%2014.707c.06.035.134.064.195.098a10%2010%200%200%200%201.014.486c.346.144.706.282%201.094.408c.813.265%201.725.48%202.681.664c.289.055.587.1.885.147q1.274.207%202.633.324c1.15.098%202.319.166%203.498.166s2.349-.068%203.498-.166a35%2035%200%200%200%202.633-.324c.298-.047.596-.092.885-.147c.956-.184%201.868-.4%202.681-.664a15%2015%200%200%200%201.395-.539a10%2010%200%200%200%20.713-.355c.061-.034.136-.063.195-.098V20c0%201.058-4.556%203-12%203S4%2021.058%204%2020z%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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M16%207C9.043%207%202%208.718%202%2012v8c0%203.282%207.043%205%2014%205s14-1.718%2014-5v-8c0-3.282-7.043-5-14-5m0%202c7.444%200%2012%201.942%2012%203c0%20.926-3.489%202.528-9.348%202.914A40%2040%200%200%201%2016%2015c-7.444%200-12-1.942-12-3s4.556-3%2012-3M4%2014.707c.06.035.134.064.195.098a10%2010%200%200%200%201.014.486c.346.144.706.282%201.094.408c.813.265%201.725.48%202.681.664c.289.055.587.1.885.147q1.274.207%202.633.324c1.15.098%202.319.166%203.498.166s2.349-.068%203.498-.166a35%2035%200%200%200%202.633-.324c.298-.047.596-.092.885-.147c.956-.184%201.868-.4%202.681-.664a15%2015%200%200%200%201.395-.539a10%2010%200%200%200%20.713-.355c.061-.034.136-.063.195-.098V20c0%201.058-4.556%203-12%203S4%2021.058%204%2020z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/la/hockey-puck.svg?color=%231a73e8&size=48
