Add icons to this collection by clicking the heart icon.
Porthole icon - also known as transport, navigation, boat, window, travel, transportation, sailing, and porthole. Created in a clean gradient style with a white, gray, teal, navy, and pink finish, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.
<svg
xmlns="http://www.w3.org/2000/svg"
width="512"
height="512"
viewBox="0 0 502 502"
>
<linearGradient
id="b"
x1="277.058"
x2="277.058"
y1="481.719"
y2="-63.81"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#d4dbdb" />
<stop offset="1" stop-color="#f3f3f3" />
</linearGradient>
<linearGradient
id="c"
x1="277.058"
x2="277.058"
y1="92.535"
y2="379.675"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#74d2e8" />
<stop offset="1" stop-color="#baeaf5" />
</linearGradient>
<linearGradient
id="d"
x1="277.058"
x2="277.058"
y1="225.064"
y2="451.419"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#53aae6" />
<stop offset="1" stop-color="#a4d2f0" />
</linearGradient>
<linearGradient id="a">
<stop offset="0" stop-color="#4e5660" />
<stop offset="1" stop-color="#64768d" />
</linearGradient>
<linearGradient
id="e"
x1="52.116"
x2="52.116"
y1="345.556"
y2="105.38"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="f"
x1="277.058"
x2="277.058"
y1="84.844"
y2="50.367"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="g"
x1="144.899"
x2="144.899"
y1="139.586"
y2="105.109"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="h"
x1="409.217"
x2="409.217"
y1="139.586"
y2="105.109"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="i"
x1="463.959"
x2="463.959"
y1="271.745"
y2="237.268"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="j"
x1="409.217"
x2="409.217"
y1="403.903"
y2="369.426"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="k"
x1="277.058"
x2="277.058"
y1="458.645"
y2="424.168"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="l"
x1="144.899"
x2="144.899"
y1="403.903"
y2="369.426"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<circle cx="277.058" cy="251" r="224.942" fill="url(#b)" />
<circle cx="277.058" cy="251" r="148.859" fill="url(#c)" />
<path
fill="#17c5d9"
d="m311.985 377.6-.025-.09c-2.231-7.987-10.05-13.036-18.257-11.847a115.98 115.98 0 0 1-16.645 1.197c-63.885 0-115.858-51.975-115.858-115.859a115.66 115.66 0 0 1 3.076-26.555c2.012-8.536-2.827-17.183-11.223-19.715l-.097-.029c-9.068-2.735-18.592 2.723-20.77 11.941-3 12.696-4.375 26.02-3.891 39.741 2.753 78.051 66.228 141.112 144.294 143.411a150.12 150.12 0 0 0 25.857-1.464c9.844-1.422 16.214-11.151 13.539-20.731z"
/>
<path
fill="url(#d)"
d="M368.465 257.317c-9.347 8.38-23.504 8.38-32.852 0-33.322-29.873-83.788-29.873-117.109 0-9.347 8.38-23.505 8.38-32.852 0-16.14-14.469-36.302-21.908-56.59-22.361a150.479 150.479 0 0 0-.863 16.044c0 82.213 66.647 148.859 148.859 148.859 82.213 0 148.859-66.647 148.859-148.859 0-5.421-.298-10.773-.863-16.044-20.287.453-40.45 7.892-56.589 22.361z"
/>
<path
fill="#0099cf"
d="M272.588 399.793c8.807.259 17.446-.251 25.857-1.464 9.845-1.42 16.215-11.149 13.54-20.729l-.025-.09c-2.231-7.987-10.05-13.037-18.257-11.847a115.97 115.97 0 0 1-16.645 1.197c-63.885 0-115.858-51.975-115.858-115.859 0-3.046.129-6.061.362-9.048-10.37-4.429-21.412-6.748-32.492-6.996a150.9 150.9 0 0 0-.775 21.426c2.752 78.051 66.227 141.111 144.293 143.41z"
/>
<path
fill="url(#e)"
d="M67.114 165.11H37.118C16.618 165.11 0 181.728 0 202.228v97.544c0 20.5 16.618 37.118 37.118 37.118h29.996c20.5 0 37.118-16.618 37.118-37.118v-97.544c0-20.5-16.618-37.118-37.118-37.118z"
/>
<path fill="#424e5e" d="M0 239.5h104.232v23H0z" />
<circle cx="277.058" cy="64.099" r="19.211" fill="url(#f)" />
<circle cx="144.899" cy="118.841" r="19.211" fill="url(#g)" />
<circle cx="409.217" cy="118.841" r="19.211" fill="url(#h)" />
<circle cx="463.959" cy="251" r="19.211" fill="url(#i)" />
<circle cx="409.217" cy="383.159" r="19.211" fill="url(#j)" />
<circle cx="277.058" cy="437.901" r="19.211" fill="url(#k)" />
<circle cx="144.899" cy="383.159" r="19.211" fill="url(#l)" />
<ellipse cx="189.173" cy="341.097" fill="#eaadcd" rx="14.936" ry="12.003" />
<ellipse cx="364.944" cy="341.097" fill="#eaadcd" rx="14.936" ry="12.003" />
<circle
cx="214.779"
cy="311.479"
r="29.618"
fill="#fff"
transform="rotate(-67.48 214.887 311.437)"
/>
<circle
cx="339.337"
cy="311.479"
r="29.618"
fill="#fff"
transform="rotate(-67.48 339.453 311.4)"
/>
<g fill="#3b3b44">
<circle
cx="214.779"
cy="311.479"
r="17.652"
transform="rotate(-79.1 214.749 311.463)"
/>
<circle
cx="339.337"
cy="311.479"
r="17.652"
transform="rotate(-73.14 339.425 311.498)"
/>
<path
d="M277.059 342.039c-5.248 0-10.495-1.984-14.776-5.953a5 5 0 0 1 6.798-7.333c4.698 4.356 11.258 4.354 15.954 0a5 5 0 1 1 6.798 7.333c-4.28 3.969-9.527 5.953-14.774 5.953z"
/>
</g>
<g fill="#dff7fa">
<path
d="M330.96 159.789a9.958 9.958 0 0 1-4.7-1.18 104.334 104.334 0 0 0-9.977-4.666c-5.119-2.072-7.59-7.902-5.518-13.021s7.904-7.586 13.022-5.518a124.757 124.757 0 0 1 11.891 5.562c4.872 2.601 6.714 8.658 4.113 13.53a10 10 0 0 1-8.831 5.293zM385.871 224.783c-4.189 0-8.093-2.653-9.487-6.847-4.587-13.788-11.884-26.275-21.688-37.115-3.705-4.096-3.388-10.42.708-14.124 4.096-3.706 10.421-3.388 14.124.708 11.676 12.907 20.367 27.785 25.833 44.219 1.744 5.24-1.092 10.901-6.332 12.646a10.034 10.034 0 0 1-3.158.513z"
/>
</g>
</svg>
More icons in the same style and category