boat icon

boat-sharp from IonIcons by Ben Sperry · Sharp · MIT Free for personal and commercial use.

Name: boat-sharp
Set: IonIcons
Style: Sharp
Viewbox: 512×512
License: MIT

2 other variants in IonIcons

The same icon in other sets

boatAkar Icons boatHuge Icons boatMyna UI Icons boatPhosphor boatSimple Icons

Use the boat icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M477.77 246.42c-2.13-6-7.23-9.55-12.56-11.95L432 221.38V92a20 20 0 0 0-20-20h-76V40a16 16 0 0 0-16-16H192a16 16 0 0 0-16 16v32h-76a20 20 0 0 0-20 20v129.46l-33.08 13.06c-5.33 2.4-10.58 6-12.72 12s-3.16 11.81-1 19L84.25 415.7h1.06c34.12 0 64-17.41 85.31-43.82c21.32 26.41 51.18 42.12 85.3 42.12s64-15.76 85.31-42.17c21.32 26.41 51.18 43.87 85.3 43.87h1.06l51.25-150.17c2.16-6 1.07-13.1-1.07-19.11M256 152l-144 56.83V108a4 4 0 0 1 4-4h280a4 4 0 0 1 4 4v100.76Z"/><path fill="currentColor" d="M345.22 407c-52.25 36.26-126.35 36.25-178.6 0c0 0-45.64 63-94.64 63l13.33 1c29.86 0 58.65-11.73 85.31-25.59a185.33 185.33 0 0 0 170.6 0c26.66 13.87 55.45 25.6 85.31 25.6l13.33-1C392.21 470 345.22 407 345.22 407"/></svg>

React

import type { SVGProps } from "react";

export function IonBoatSharp(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="M477.77 246.42c-2.13-6-7.23-9.55-12.56-11.95L432 221.38V92a20 20 0 0 0-20-20h-76V40a16 16 0 0 0-16-16H192a16 16 0 0 0-16 16v32h-76a20 20 0 0 0-20 20v129.46l-33.08 13.06c-5.33 2.4-10.58 6-12.72 12s-3.16 11.81-1 19L84.25 415.7h1.06c34.12 0 64-17.41 85.31-43.82c21.32 26.41 51.18 42.12 85.3 42.12s64-15.76 85.31-42.17c21.32 26.41 51.18 43.87 85.3 43.87h1.06l51.25-150.17c2.16-6 1.07-13.1-1.07-19.11M256 152l-144 56.83V108a4 4 0 0 1 4-4h280a4 4 0 0 1 4 4v100.76Z"/><path fill="currentColor" d="M345.22 407c-52.25 36.26-126.35 36.25-178.6 0c0 0-45.64 63-94.64 63l13.33 1c29.86 0 58.65-11.73 85.31-25.59a185.33 185.33 0 0 0 170.6 0c26.66 13.87 55.45 25.6 85.31 25.6l13.33-1C392.21 470 345.22 407 345.22 407"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M477.77 246.42c-2.13-6-7.23-9.55-12.56-11.95L432 221.38V92a20 20 0 0 0-20-20h-76V40a16 16 0 0 0-16-16H192a16 16 0 0 0-16 16v32h-76a20 20 0 0 0-20 20v129.46l-33.08 13.06c-5.33 2.4-10.58 6-12.72 12s-3.16 11.81-1 19L84.25 415.7h1.06c34.12 0 64-17.41 85.31-43.82c21.32 26.41 51.18 42.12 85.3 42.12s64-15.76 85.31-42.17c21.32 26.41 51.18 43.87 85.3 43.87h1.06l51.25-150.17c2.16-6 1.07-13.1-1.07-19.11M256 152l-144 56.83V108a4 4 0 0 1 4-4h280a4 4 0 0 1 4 4v100.76Z"/><path fill="currentColor" d="M345.22 407c-52.25 36.26-126.35 36.25-178.6 0c0 0-45.64 63-94.64 63l13.33 1c29.86 0 58.65-11.73 85.31-25.59a185.33 185.33 0 0 0 170.6 0c26.66 13.87 55.45 25.6 85.31 25.6l13.33-1C392.21 470 345.22 407 345.22 407"/></svg>
</template>

CSS

.icon-boat-sharp {
  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%22M477.77%20246.42c-2.13-6-7.23-9.55-12.56-11.95L432%20221.38V92a20%2020%200%200%200-20-20h-76V40a16%2016%200%200%200-16-16H192a16%2016%200%200%200-16%2016v32h-76a20%2020%200%200%200-20%2020v129.46l-33.08%2013.06c-5.33%202.4-10.58%206-12.72%2012s-3.16%2011.81-1%2019L84.25%20415.7h1.06c34.12%200%2064-17.41%2085.31-43.82c21.32%2026.41%2051.18%2042.12%2085.3%2042.12s64-15.76%2085.31-42.17c21.32%2026.41%2051.18%2043.87%2085.3%2043.87h1.06l51.25-150.17c2.16-6%201.07-13.1-1.07-19.11M256%20152l-144%2056.83V108a4%204%200%200%201%204-4h280a4%204%200%200%201%204%204v100.76Z%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M345.22%20407c-52.25%2036.26-126.35%2036.25-178.6%200c0%200-45.64%2063-94.64%2063l13.33%201c29.86%200%2058.65-11.73%2085.31-25.59a185.33%20185.33%200%200%200%20170.6%200c26.66%2013.87%2055.45%2025.6%2085.31%2025.6l13.33-1C392.21%20470%20345.22%20407%20345.22%20407%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%22M477.77%20246.42c-2.13-6-7.23-9.55-12.56-11.95L432%20221.38V92a20%2020%200%200%200-20-20h-76V40a16%2016%200%200%200-16-16H192a16%2016%200%200%200-16%2016v32h-76a20%2020%200%200%200-20%2020v129.46l-33.08%2013.06c-5.33%202.4-10.58%206-12.72%2012s-3.16%2011.81-1%2019L84.25%20415.7h1.06c34.12%200%2064-17.41%2085.31-43.82c21.32%2026.41%2051.18%2042.12%2085.3%2042.12s64-15.76%2085.31-42.17c21.32%2026.41%2051.18%2043.87%2085.3%2043.87h1.06l51.25-150.17c2.16-6%201.07-13.1-1.07-19.11M256%20152l-144%2056.83V108a4%204%200%200%201%204-4h280a4%204%200%200%201%204%204v100.76Z%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M345.22%20407c-52.25%2036.26-126.35%2036.25-178.6%200c0%200-45.64%2063-94.64%2063l13.33%201c29.86%200%2058.65-11.73%2085.31-25.59a185.33%20185.33%200%200%200%20170.6%200c26.66%2013.87%2055.45%2025.6%2085.31%2025.6l13.33-1C392.21%20470%20345.22%20407%20345.22%20407%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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