bike icon
bike from IconPark by ByteDance · Color · Hardware · Apache-2.0 Free for personal and commercial use.
- Name
- bike
- Set
- IconPark
- Style
- Color
- Category
- Hardware
- Viewbox
- 48×48
- License
- Apache 2.0
The same icon in other sets
More hardware icons from IconPark
Use the bike icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="#2F88FF" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M10.5 42C15.1944 42 19 38.1944 19 33.5C19 28.8056 15.1944 25 10.5 25C5.80558 25 2 28.8056 2 33.5C2 38.1944 5.80558 42 10.5 42Z"/><path fill="#2F88FF" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M37 42C41.9706 42 46 37.9706 46 33C46 28.0294 41.9706 24 37 24C32.0294 24 28 28.0294 28 33C28 37.9706 32.0294 42 37 42Z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M18.9966 6H27.9971L36.9999 33"/><path fill="#2F88FF" fill-rule="evenodd" d="M11.0574 33L31.6819 16.7632L11.0574 33Z" clip-rule="evenodd"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M11.0574 33L31.6819 16.7632"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M31.6819 15H40.1539L42.0001 10"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M8 15.9736H15"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M15 16L18.2727 26.4211"/></g></svg>
React
import type { SVGProps } from "react";
export function IconParkBike(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="#2F88FF" stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M10.5 42C15.1944 42 19 38.1944 19 33.5C19 28.8056 15.1944 25 10.5 25C5.80558 25 2 28.8056 2 33.5C2 38.1944 5.80558 42 10.5 42Z"/><path fill="#2F88FF" stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M37 42C41.9706 42 46 37.9706 46 33C46 28.0294 41.9706 24 37 24C32.0294 24 28 28.0294 28 33C28 37.9706 32.0294 42 37 42Z"/><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M18.9966 6H27.9971L36.9999 33"/><path fill="#2F88FF" fillRule="evenodd" d="M11.0574 33L31.6819 16.7632L11.0574 33Z" clipRule="evenodd"/><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M11.0574 33L31.6819 16.7632"/><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M31.6819 15H40.1539L42.0001 10"/><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M8 15.9736H15"/><path stroke="#000" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="M15 16L18.2727 26.4211"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="#2F88FF" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M10.5 42C15.1944 42 19 38.1944 19 33.5C19 28.8056 15.1944 25 10.5 25C5.80558 25 2 28.8056 2 33.5C2 38.1944 5.80558 42 10.5 42Z"/><path fill="#2F88FF" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M37 42C41.9706 42 46 37.9706 46 33C46 28.0294 41.9706 24 37 24C32.0294 24 28 28.0294 28 33C28 37.9706 32.0294 42 37 42Z"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M18.9966 6H27.9971L36.9999 33"/><path fill="#2F88FF" fill-rule="evenodd" d="M11.0574 33L31.6819 16.7632L11.0574 33Z" clip-rule="evenodd"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M11.0574 33L31.6819 16.7632"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M31.6819 15H40.1539L42.0001 10"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M8 15.9736H15"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M15 16L18.2727 26.4211"/></g></svg> </template>
CSS
.icon-bike {
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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M10.5%2042C15.1944%2042%2019%2038.1944%2019%2033.5C19%2028.8056%2015.1944%2025%2010.5%2025C5.80558%2025%202%2028.8056%202%2033.5C2%2038.1944%205.80558%2042%2010.5%2042Z%22%2F%3E%3Cpath%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M37%2042C41.9706%2042%2046%2037.9706%2046%2033C46%2028.0294%2041.9706%2024%2037%2024C32.0294%2024%2028%2028.0294%2028%2033C28%2037.9706%2032.0294%2042%2037%2042Z%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M18.9966%206H27.9971L36.9999%2033%22%2F%3E%3Cpath%20fill%3D%22%232F88FF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M11.0574%2033L31.6819%2016.7632L11.0574%2033Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M11.0574%2033L31.6819%2016.7632%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M31.6819%2015H40.1539L42.0001%2010%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M8%2015.9736H15%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M15%2016L18.2727%2026.4211%22%2F%3E%3C%2Fg%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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M10.5%2042C15.1944%2042%2019%2038.1944%2019%2033.5C19%2028.8056%2015.1944%2025%2010.5%2025C5.80558%2025%202%2028.8056%202%2033.5C2%2038.1944%205.80558%2042%2010.5%2042Z%22%2F%3E%3Cpath%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M37%2042C41.9706%2042%2046%2037.9706%2046%2033C46%2028.0294%2041.9706%2024%2037%2024C32.0294%2024%2028%2028.0294%2028%2033C28%2037.9706%2032.0294%2042%2037%2042Z%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M18.9966%206H27.9971L36.9999%2033%22%2F%3E%3Cpath%20fill%3D%22%232F88FF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M11.0574%2033L31.6819%2016.7632L11.0574%2033Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M11.0574%2033L31.6819%2016.7632%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M31.6819%2015H40.1539L42.0001%2010%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M8%2015.9736H15%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%224%22%20d%3D%22M15%2016L18.2727%2026.4211%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/icon-park/bike.svg?color=%231a73e8&size=48
