Harbor icon
devicon:harbor
The Harbor icon (devicon:harbor) is a free SVG icon from the Devicon set by konpa. It is drawn on a 128 × 128 grid. Devicon icons are released under the MIT license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><defs><clipPath id="SVGpIWApdEP"><path d="M35 98h29v26H35Zm0 0"/></clipPath><clipPath id="SVG4XczIbkZ"><path d="M62.203 109.762L36.86 98.598l-1.41 15.945l27.867 8.852Zm0 0"/></clipPath><clipPath id="SVG1q9csdxg"><path d="M36 31h26v53H36Zm0 0"/></clipPath><clipPath id="SVGkNhjHd9x"><path d="M41.82 48.07h14.23v12.14h-3.374v-5.183a3.742 3.742 0 0 0-5.625-3.285a3.74 3.74 0 0 0-1.852 3.285v5.184H41.82Zm-2.843 26.59l21.113 9.305l-1.453-17.805h2.761v-5.95h-2.05V48.07h2.05v-3.488L50.012 33.437v-.785a1.076 1.076 0 0 0-2.149 0v.785l-11.39 11.145v3.488h2.05v12.14h-2.05v5.95h3.257Zm0 0"/></clipPath><clipPath id="SVGCfgbkQDf"><path d="M37 84h25v16H37Zm0 0"/></clipPath><clipPath id="SVGFdyVcdxD"><path d="m37.742 88.637l23.582 10.39l-.355-4.328l-22.871-10.078Zm0 0"/></clipPath><clipPath id="SVGJpqLHbJK"><path d="M37 91h25v16H37Zm0 0"/></clipPath><clipPath id="SVG9dn3IbnW"><path d="m37.125 95.621l24.813 10.938l-.352-4.329L37.48 91.61Zm0 0"/></clipPath><clipPath id="SVG2NbZgYEv"><path d="M38 77h23v15H38Zm0 0"/></clipPath><clipPath id="SVGYk0eRc2J"><path d="m38.715 77.633l-.356 4.015l22.348 9.848l-.352-4.328Zm0 0"/></clipPath><clipPath id="SVG5qQx9coK"><path d="M61 11h54v41H61Zm0 0"/></clipPath><clipPath id="SVGbiqTc54H"><path d="M113.406 23.047a64.8 64.8 0 0 0-10.98-10.387a80 80 0 0 0-1.766-1.262l-8.328 8.66l-30.394 31.61l41.851-21.66l10.73-5.551c-.37-.469-.73-.953-1.113-1.41m0 0"/></clipPath><clipPath id="SVGQJvFJbiw"><path d="M61 56h67v24H61Zm0 0"/></clipPath><clipPath id="SVGemYk6bPY"><path d="M128.344 63.656c-.008-.734-.051-1.46-.082-2.187l-11.89-.852l-54.434-3.906l53.402 18.523l11.222 3.895c.036-.133.075-.262.106-.399a64 64 0 0 0 1.687-14.566c0-.172-.011-.34-.011-.508m0 0"/></clipPath><clipPath id="SVG6vCZFdSU"><path d="M62 35h66v20H62Zm0 0"/></clipPath><clipPath id="SVGjTK8Pe4a"><path d="M126.59 49.262a63.6 63.6 0 0 0-5.106-13.918l-11.418 3.672l-47.304 15.199l52.41-1.785l11.996-.407c-.18-.925-.36-1.851-.578-2.761m0 0"/></clipPath><linearGradient id="SVGGC2JuTNG" x1="31.138" x2="32.376" y1="477.548" y2="477.548" gradientTransform="matrix(22.51369 0 0 -22.51369 -665.587 10862.375)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#60b932"/><stop offset=".282" stop-color="#60b932"/><stop offset="1" stop-color="#367c34"/></linearGradient><linearGradient id="SVGRKW9tbAG" x1="30.81" x2="32.048" y1="476.94" y2="476.94" gradientTransform="matrix(20.1358 0 0 -20.1358 -583.91 9661.344)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#60b932"/><stop offset=".282" stop-color="#60b932"/><stop offset="1" stop-color="#367c34"/></linearGradient><linearGradient id="SVGgBSMtewp" x1="30.641" x2="31.879" y1="476.024" y2="476.024" gradientTransform="matrix(19.05163 0 0 -19.05163 -546.026 9160.86)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#60b932"/><stop offset=".282" stop-color="#60b932"/><stop offset="1" stop-color="#367c34"/></linearGradient><linearGradient id="SVGIYbvEdhf" x1="30.802" x2="32.04" y1="476.5" y2="476.5" gradientTransform="matrix(20.0487 0 0 -20.0487 -580.425 9652.296)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#60b932"/><stop offset=".282" stop-color="#60b932"/><stop offset="1" stop-color="#367c34"/></linearGradient><linearGradient id="SVGo0HlGbmD" x1="30.462" x2="31.7" y1="475.495" y2="475.495" gradientTransform="matrix(18.05456 0 0 -18.05456 -511.625 8669.424)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#60b932"/><stop offset=".282" stop-color="#60b932"/><stop offset="1" stop-color="#367c34"/></linearGradient><linearGradient id="SVGUvecFcMP" x1="30.575" x2="31.813" y1="484.412" y2="484.412" gradientTransform="rotate(143.477 3183.183 12126.268)scale(-48.899 48.899)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4596d8"/><stop offset=".2" stop-color="#4596d8"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="SVGCweG6dXU" x1="33.693" x2="34.931" y1="483.348" y2="483.348" gradientTransform="rotate(191.535 -2340.84 13838.138)scale(-57.5581 57.5581)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4194d7"/><stop offset=".2" stop-color="#4194d7"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="SVGkPEVbekU" x1="32.218" x2="33.456" y1="483.434" y2="483.434" gradientTransform="rotate(169.775 320.286 12867.63)scale(-52.79483 52.79483)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4194d7"/><stop offset=".333" stop-color="#4496d8"/><stop offset="1" stop-color="#fff"/></linearGradient></defs><path fill="#fff" d="M9.227 64.164c0-30.348 24.601-54.95 54.949-54.95s54.953 24.602 54.953 54.95s-24.602 54.95-54.95 54.95c-30.35 0-54.952-24.602-54.952-54.95"/><g clip-path="url(#SVGpIWApdEP)"><g clip-path="url(#SVG4XczIbkZ)"><path fill="url(#SVGGC2JuTNG)" d="M62.203 109.762L36.86 98.598l-1.41 15.945l27.867 8.852l-1.113-13.633"/></g></g><g clip-path="url(#SVG1q9csdxg)"><g clip-path="url(#SVGkNhjHd9x)"><path fill="url(#SVGRKW9tbAG)" d="M41.82 48.07h14.23v12.14h-3.374v-5.183a3.742 3.742 0 0 0-5.625-3.285a3.74 3.74 0 0 0-1.852 3.285v5.184H41.82Zm-2.843 26.59l21.113 9.305l-1.453-17.805h2.761v-5.95h-2.05V48.07h2.05v-3.488L50.012 33.437v-.785a1.076 1.076 0 0 0-2.149 0v.785l-11.39 11.145v3.488h2.05v12.14h-2.05v5.95h3.257z"/></g></g><g clip-path="url(#SVGCfgbkQDf)"><g clip-path="url(#SVGFdyVcdxD)"><path fill="url(#SVGgBSMtewp)" d="m37.742 88.637l23.582 10.39l-.355-4.328l-22.875-10.078l-.356 4.016"/></g></g><g clip-path="url(#SVGJpqLHbJK)"><g clip-path="url(#SVG9dn3IbnW)"><path fill="url(#SVGIYbvEdhf)" d="m37.125 95.621l24.813 10.938l-.352-4.329L37.48 91.61z"/></g></g><g clip-path="url(#SVG2NbZgYEv)"><g clip-path="url(#SVGYk0eRc2J)"><path fill="url(#SVGo0HlGbmD)" d="m38.715 77.633l-.356 4.015l22.348 9.848l-.352-4.328z"/></g></g><path fill="#696566" d="m110.066 39.016l11.418-3.672c-.043-.078-.074-.164-.117-.242a64.3 64.3 0 0 0-6.847-10.645l-10.73 5.55a52.7 52.7 0 0 1 6.175 8.813zm6.305 21.601l11.89.852a64 64 0 0 0-1.093-9.446l-11.996.407a52 52 0 0 1 1.2 8.187"/><path fill="#696566" d="M64.18 116.512c-22.305.023-42.172-14.09-49.496-35.157c-7.325-21.07-.496-44.464 17.007-58.28C49.2 9.253 73.54 8.042 92.332 20.058l8.324-8.66C77.523-4.599 46.668-3.662 24.543 13.706S-5.812 60.828 4.234 87.097c10.047 26.274 36.036 42.938 64.102 41.11s51.672-21.723 58.227-49.078l-11.227-3.895c-5.238 24.07-26.527 41.246-51.16 41.278"/><g clip-path="url(#SVG5qQx9coK)"><g clip-path="url(#SVGbiqTc54H)"><path fill="url(#SVGUvecFcMP)" d="M113.406 23.047a64.8 64.8 0 0 0-10.98-10.387a80 80 0 0 0-1.766-1.262l-8.328 8.66l-30.394 31.61l41.851-21.66l10.73-5.551c-.37-.469-.73-.953-1.113-1.41"/></g></g><g clip-path="url(#SVGQJvFJbiw)"><g clip-path="url(#SVGemYk6bPY)"><path fill="url(#SVGCweG6dXU)" d="M128.344 63.656c-.008-.734-.051-1.46-.082-2.187l-11.89-.852l-54.434-3.906l53.402 18.523l11.222 3.895c.036-.133.075-.262.106-.399a64 64 0 0 0 1.687-14.566c0-.172-.011-.34-.011-.508"/></g></g><g clip-path="url(#SVG6vCZFdSU)"><g clip-path="url(#SVGjTK8Pe4a)"><path fill="url(#SVGkPEVbekU)" d="M126.59 49.262a63.6 63.6 0 0 0-5.106-13.918l-11.418 3.672l-47.304 15.199l52.41-1.785l11.996-.407c-.18-.925-.36-1.851-.578-2.761"/></g></g></svg>How to use the Harbor icon
React
import { Icon } from "@iconify/react";
<Icon icon="devicon:harbor" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="devicon:harbor" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="devicon:harbor" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[devicon--harbor]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/devicon -->
<div class="i-devicon:harbor"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="devicon:harbor"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/devicon/harbor.svg" alt="Harbor icon" width="24" height="24">Related icons in Devicon
Harbor icon in other icon sets
Harbor icon FAQ
Is the Harbor icon free for commercial use?
Yes. Devicon icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Harbor icon in React?
Install @iconify/react and render <Icon icon="devicon:harbor" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Harbor icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/devicon/harbor.svg" alt="Harbor icon">, or paste the SVG code inline to style it with CSS.