bicycle icon
bicycle from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.
- Name
- bicycle
- Set
- IonIcons
- Style
- Regular
- Viewbox
- 512×512
- License
- MIT
2 other variants in IonIcons
The same icon in other sets
bicycleAkar IconsbicycleBootstrap IconsbicycleCarbonbicycleEmoji One (Colored)bicycleElement PlusbicycleFont Awesome 6 SolidbicycleFont Awesome SolidbicycleFluent EmojibicycleFluent Emoji FlatbicycleFluent Emoji High ContrastbicycleFirefox OS EmojibicycleHuge IconsbicycleIconoirbicycleLine AwesomebicycleMaterial Design IconsbicycleNoto EmojibicycleOpenMojibicyclePhosphorbicycleStreamline EmojisbicycleTwitter Emoji
Use the bicycle icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M388 448a92 92 0 1 1 92-92a92.1 92.1 0 0 1-92 92m0-152a60 60 0 1 0 60 60a60.07 60.07 0 0 0-60-60M124 448a92 92 0 1 1 92-92a92.1 92.1 0 0 1-92 92m0-152a60 60 0 1 0 60 60a60.07 60.07 0 0 0-60-60m196-168a31.89 31.89 0 0 0 32-32.1A31.55 31.55 0 0 0 320.2 64a32 32 0 1 0-.2 64"/><path fill="currentColor" d="M367.55 192h-43.76a4 4 0 0 1-3.51-2.08l-31.74-58.17a31 31 0 0 0-49.38-7.75l-69.86 70.4a32.56 32.56 0 0 0-9.3 22.4c0 17.4 12.6 23.6 18.5 27.1c28.5 16.42 48.57 28.43 59.58 35.1a4 4 0 0 1 1.92 3.41v69.12c0 8.61 6.62 16 15.23 16.43A16 16 0 0 0 272 352v-86a16 16 0 0 0-6.66-13l-37-26.61a4 4 0 0 1-.58-6l42-44.79a4 4 0 0 1 6.42.79L298 215.77a16 16 0 0 0 14 8.23h56a16 16 0 0 0 16-16.77c-.42-8.61-7.84-15.23-16.45-15.23"/></svg>
React
import type { SVGProps } from "react";
export function IonBicycle(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="M388 448a92 92 0 1 1 92-92a92.1 92.1 0 0 1-92 92m0-152a60 60 0 1 0 60 60a60.07 60.07 0 0 0-60-60M124 448a92 92 0 1 1 92-92a92.1 92.1 0 0 1-92 92m0-152a60 60 0 1 0 60 60a60.07 60.07 0 0 0-60-60m196-168a31.89 31.89 0 0 0 32-32.1A31.55 31.55 0 0 0 320.2 64a32 32 0 1 0-.2 64"/><path fill="currentColor" d="M367.55 192h-43.76a4 4 0 0 1-3.51-2.08l-31.74-58.17a31 31 0 0 0-49.38-7.75l-69.86 70.4a32.56 32.56 0 0 0-9.3 22.4c0 17.4 12.6 23.6 18.5 27.1c28.5 16.42 48.57 28.43 59.58 35.1a4 4 0 0 1 1.92 3.41v69.12c0 8.61 6.62 16 15.23 16.43A16 16 0 0 0 272 352v-86a16 16 0 0 0-6.66-13l-37-26.61a4 4 0 0 1-.58-6l42-44.79a4 4 0 0 1 6.42.79L298 215.77a16 16 0 0 0 14 8.23h56a16 16 0 0 0 16-16.77c-.42-8.61-7.84-15.23-16.45-15.23"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M388 448a92 92 0 1 1 92-92a92.1 92.1 0 0 1-92 92m0-152a60 60 0 1 0 60 60a60.07 60.07 0 0 0-60-60M124 448a92 92 0 1 1 92-92a92.1 92.1 0 0 1-92 92m0-152a60 60 0 1 0 60 60a60.07 60.07 0 0 0-60-60m196-168a31.89 31.89 0 0 0 32-32.1A31.55 31.55 0 0 0 320.2 64a32 32 0 1 0-.2 64"/><path fill="currentColor" d="M367.55 192h-43.76a4 4 0 0 1-3.51-2.08l-31.74-58.17a31 31 0 0 0-49.38-7.75l-69.86 70.4a32.56 32.56 0 0 0-9.3 22.4c0 17.4 12.6 23.6 18.5 27.1c28.5 16.42 48.57 28.43 59.58 35.1a4 4 0 0 1 1.92 3.41v69.12c0 8.61 6.62 16 15.23 16.43A16 16 0 0 0 272 352v-86a16 16 0 0 0-6.66-13l-37-26.61a4 4 0 0 1-.58-6l42-44.79a4 4 0 0 1 6.42.79L298 215.77a16 16 0 0 0 14 8.23h56a16 16 0 0 0 16-16.77c-.42-8.61-7.84-15.23-16.45-15.23"/></svg> </template>
CSS
.icon-bicycle {
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%22M388%20448a92%2092%200%201%201%2092-92a92.1%2092.1%200%200%201-92%2092m0-152a60%2060%200%201%200%2060%2060a60.07%2060.07%200%200%200-60-60M124%20448a92%2092%200%201%201%2092-92a92.1%2092.1%200%200%201-92%2092m0-152a60%2060%200%201%200%2060%2060a60.07%2060.07%200%200%200-60-60m196-168a31.89%2031.89%200%200%200%2032-32.1A31.55%2031.55%200%200%200%20320.2%2064a32%2032%200%201%200-.2%2064%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M367.55%20192h-43.76a4%204%200%200%201-3.51-2.08l-31.74-58.17a31%2031%200%200%200-49.38-7.75l-69.86%2070.4a32.56%2032.56%200%200%200-9.3%2022.4c0%2017.4%2012.6%2023.6%2018.5%2027.1c28.5%2016.42%2048.57%2028.43%2059.58%2035.1a4%204%200%200%201%201.92%203.41v69.12c0%208.61%206.62%2016%2015.23%2016.43A16%2016%200%200%200%20272%20352v-86a16%2016%200%200%200-6.66-13l-37-26.61a4%204%200%200%201-.58-6l42-44.79a4%204%200%200%201%206.42.79L298%20215.77a16%2016%200%200%200%2014%208.23h56a16%2016%200%200%200%2016-16.77c-.42-8.61-7.84-15.23-16.45-15.23%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%22M388%20448a92%2092%200%201%201%2092-92a92.1%2092.1%200%200%201-92%2092m0-152a60%2060%200%201%200%2060%2060a60.07%2060.07%200%200%200-60-60M124%20448a92%2092%200%201%201%2092-92a92.1%2092.1%200%200%201-92%2092m0-152a60%2060%200%201%200%2060%2060a60.07%2060.07%200%200%200-60-60m196-168a31.89%2031.89%200%200%200%2032-32.1A31.55%2031.55%200%200%200%20320.2%2064a32%2032%200%201%200-.2%2064%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M367.55%20192h-43.76a4%204%200%200%201-3.51-2.08l-31.74-58.17a31%2031%200%200%200-49.38-7.75l-69.86%2070.4a32.56%2032.56%200%200%200-9.3%2022.4c0%2017.4%2012.6%2023.6%2018.5%2027.1c28.5%2016.42%2048.57%2028.43%2059.58%2035.1a4%204%200%200%201%201.92%203.41v69.12c0%208.61%206.62%2016%2015.23%2016.43A16%2016%200%200%200%20272%20352v-86a16%2016%200%200%200-6.66-13l-37-26.61a4%204%200%200%201-.58-6l42-44.79a4%204%200%200%201%206.42.79L298%20215.77a16%2016%200%200%200%2014%208.23h56a16%2016%200%200%200%2016-16.77c-.42-8.61-7.84-15.23-16.45-15.23%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/bicycle.svg?color=%231a73e8&size=48
