Lighthouse icon
logos:lighthouse
The Lighthouse icon (logos:lighthouse) is a free SVG icon from the SVG Logos set by Gil Barbara. It is drawn on a 256 × 256 grid. SVG Logos icons are released under the CC0 license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- SVG Logos
- Author
- Gil Barbara
- License
- CC0-1.0
- Size
- 256 × 256
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><defs><linearGradient id="SVGICRETdzN" x1="49.994%" x2="49.994%" y1=".226%" y2="99.725%"><stop offset="0%" stop-color="#212121" stop-opacity=".04"/><stop offset="66%" stop-color="#212121" stop-opacity="0"/></linearGradient><linearGradient id="SVGPN4omccq" x1="36.626%" x2="64.01%" y1="20.358%" y2="100.652%"><stop offset="0%" stop-color="#fff" stop-opacity=".1"/><stop offset="100%" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="SVGpecrgAGw" x1="68.935%" x2="31.065%" y1="65.756%" y2="35.799%"><stop offset="0%" stop-color="#262626" stop-opacity=".1"/><stop offset="100%" stop-color="#262626" stop-opacity="0"/></linearGradient><linearGradient id="SVGLUBszbWP" x1="62.531%" x2="24.779%" y1="13.086%" y2="100.996%"><stop offset="0%" stop-color="#262626" stop-opacity=".1"/><stop offset="100%" stop-color="#262626" stop-opacity="0"/></linearGradient><linearGradient id="SVGTsQK6cSw" x1="0%" x2="100%" y1="50%" y2="50%"><stop offset="0%" stop-color="#262626" stop-opacity=".1"/><stop offset="100%" stop-color="#262626" stop-opacity="0"/></linearGradient><path id="SVGIUTKp2rM" d="M53.483 15.73h-7.645C42.598 6.56 33.866 0 23.594 0C10.57 0 0 10.57 0 23.594s10.57 23.597 23.594 23.597h29.889c8.686-.004 15.727-7.045 15.73-15.732c-.004-8.686-7.044-15.726-15.73-15.73"/><path id="SVG4Cc6jeMG" d="M29.887 0H0v31.459h29.887c8.685-.004 15.725-7.044 15.729-15.73C45.612 7.045 38.572.005 29.886 0"/><path id="SVGsauddeCj" d="m.72.72l12.756 40.284c4.26-4.28 10.838-10.178 10.838-16.69C24.314 11.29 13.744.72.72.72"/><path id="SVGMn4Yrd1Y" d="M61.71 18.15h-8.822C49.151 7.568 39.078 0 27.225 0C12.197 0 0 12.197 0 27.225S12.197 54.45 27.225 54.45h34.484c10.02 0 18.152-8.13 18.152-18.15c0-10.018-8.133-18.15-18.152-18.15"/><path id="SVGyFcYRckV" d="M34.484 0H0v36.3h34.484c10.02 0 18.152-8.132 18.152-18.15C52.636 8.13 44.503 0 34.484 0"/><path id="SVGsP4sGdiH" d="m.445.445l14.719 46.483C20.084 41.99 27.67 35.184 27.67 27.67C27.67 12.642 15.473.445.445.445"/><radialGradient id="SVGkOYyLd2f" cx="10.105%" cy="14.269%" r="144.565%" fx="10.105%" fy="14.269%" gradientTransform="matrix(.68182 0 0 1 .032 0)"><stop offset="0%" stop-color="#fff" stop-opacity=".1"/><stop offset="100%" stop-color="#fff" stop-opacity="0"/></radialGradient><radialGradient id="SVGTCLUYd1O" cx="14.489%" cy="14.584%" r="99.973%" fx="14.489%" fy="14.584%"><stop offset="0%" stop-color="#fff" stop-opacity=".1"/><stop offset="100%" stop-color="#fff" stop-opacity="0"/></radialGradient><radialGradient id="SVGkwwRAdjY" cx="10.105%" cy="14.269%" r="144.568%" fx="10.105%" fy="14.269%" gradientTransform="matrix(.68181 0 0 1 .032 0)"><stop offset="0%" stop-color="#fff" stop-opacity=".1"/><stop offset="100%" stop-color="#fff" stop-opacity="0"/></radialGradient><filter id="SVGfTbhlbLT" width="159.3%" height="134.8%" x="-29.7%" y="-12.4%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/></filter><filter id="SVGFLKEUOMR" width="151.4%" height="130.1%" x="-25.7%" y="-10.8%" filterUnits="objectBoundingBox"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2"/><feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/></filter></defs><g fill="none"><circle cx="127.777" cy="127.777" r="127.777" fill="#0535c1"/><path d="M155.363 58.081h75.505v75.504h-75.505z"/><g transform="translate(158.51 73.81)"><mask id="SVGj013bj3L" fill="#fff"><use href="#SVGIUTKp2rM"/></mask><g mask="url(#SVGj013bj3L)"><path fill="#eaeaea" d="M53.483 15.73h-7.645C42.598 6.56 33.866 0 23.594 0C10.57 0 0 10.57 0 23.594s10.57 23.597 23.594 23.597h29.889c8.686-.004 15.727-7.045 15.73-15.732c-.004-8.686-7.044-15.726-15.73-15.73"/><path fill="#fff" fill-opacity=".2" d="M69.212 31.649v-.19c-.003-8.686-7.043-15.726-15.729-15.73h-7.867v.393h7.867c8.609.001 15.617 6.92 15.73 15.529z"/><path fill="url(#SVGICRETdzN)" d="M77.312 47.191H23.594L45.853 15.73z"/><g transform="translate(23.594 15.73)"><mask id="SVG5ruVOd1e" fill="#fff"><use href="#SVG4Cc6jeMG"/></mask><g mask="url(#SVG5ruVOd1e)"><g transform="translate(-.72 -16.45)"><use fill="#000" filter="url(#SVGfTbhlbLT)" href="#SVGsauddeCj"/><use fill="#e1e1e1" href="#SVGsauddeCj"/></g></g></g><circle cx="23.594" cy="23.594" r="23.594" fill="#eee"/><path fill="#fff" fill-opacity=".2" d="M23.594.392c12.962 0 23.486 10.461 23.597 23.407v-.187C47.19 10.587 36.619.015 23.594.015C10.57.015 0 10.57 0 23.595v.189C.109 10.853 10.633.392 23.594.392"/><path fill="#212121" fill-opacity=".1" d="M53.483 46.796H23.594C10.635 46.796.111 36.336 0 23.392v.19c0 13.024 10.57 23.593 23.594 23.593h29.889c8.686-.003 15.726-7.043 15.73-15.729v-.187c-.109 8.61-7.118 15.536-15.73 15.54z"/></g></g><path fill="url(#SVGkOYyLd2f)" d="M211.993 89.54h-7.644c-3.241-9.17-11.973-15.73-22.244-15.73c-13.025 0-23.595 10.57-23.595 23.594s10.57 23.597 23.595 23.597h29.888c8.687-.004 15.727-7.045 15.73-15.732c-.004-8.685-7.044-15.726-15.73-15.73"/><path fill="#fff176" d="M92.929 53.725h66.792v58.08H92.929z"/><path fill="#fff" d="M85.667 142.295h79.861v79.861H85.667z"/><path fill="#f4481e" d="M174.24 105.997h11.615v23.23H69.696v-23.23h11.615V59.53l46.466-29.039l46.463 29.04zm-23.233 0v-33.59l-23.23-14.516l-23.233 14.517v33.589z"/><path fill="#f4481e" d="m64.536 238.83l19.68-132.835h87.12l19.679 132.836c-18.646 10.641-40.232 16.72-63.238 16.72c-23.007 0-44.593-6.079-63.24-16.72m89.253-92.758l-54.655 17.76l-6.643 44.833l67.33-21.88l-6.032-40.715z"/><path fill="url(#SVGPN4omccq)" d="m174.129 129.227l16.237 109.604c-18.646 10.641-40.232 16.72-63.238 16.72c-23.007 0-44.593-6.079-63.24-16.72l16.238-109.604h-10.43v-23.23h11.615V59.53l46.466-29.039l46.463 29.04v46.465h11.615v23.23H174.13"/><path fill="url(#SVGpecrgAGw)" d="M127.777 105.997H81.311V59.531l46.466-29.039z"/><path fill="url(#SVGLUBszbWP)" d="M127.777 255.551a127.7 127.7 0 0 1-63.24-16.72l14.56-109.604h48.678v126.324z"/><path fill="url(#SVGTsQK6cSw)" d="M69.696 105.997h58.081v23.232H69.696z" transform="matrix(-1 0 0 1 197.473 0)"/><circle cx="127.777" cy="127.777" r="127.777" fill="url(#SVGTCLUYd1O)"/><path d="M27.589 82.764h87.12v87.12h-87.12z"/><g transform="translate(31.217 100.913)"><mask id="SVGLOTy0ciP" fill="#fff"><use href="#SVGMn4Yrd1Y"/></mask><g mask="url(#SVGLOTy0ciP)"><path fill="#fafafa" d="M61.71 18.15h-8.822C49.151 7.568 39.078 0 27.225 0C12.197 0 0 12.197 0 27.225S12.197 54.45 27.225 54.45h34.484c10.02 0 18.152-8.13 18.152-18.15c0-10.018-8.133-18.15-18.152-18.15"/><path fill="#fff" fill-opacity=".2" d="M79.86 36.519V36.3c0-10.02-8.132-18.152-18.15-18.152h-9.074v.455h9.073c9.933 0 18.02 7.983 18.152 17.915"/><path fill="url(#SVGICRETdzN)" d="M89.206 54.45H27.225l25.683-36.301z"/><g transform="translate(27.225 18.15)"><mask id="SVGt3PrsbmF" fill="#fff"><use href="#SVGyFcYRckV"/></mask><g mask="url(#SVGt3PrsbmF)"><g transform="translate(-.445 -18.594)"><use fill="#000" filter="url(#SVGFLKEUOMR)" href="#SVGsP4sGdiH"/><use fill="#e1e1e1" href="#SVGsP4sGdiH"/></g></g></g><circle cx="27.225" cy="27.225" r="27.225" fill="#fff"/><path fill="#fff" fill-opacity=".2" d="M27.225.453c14.956 0 27.099 12.07 27.225 27.007v-.218C54.45 12.214 42.253.017 27.225.017S0 12.197 0 27.225v.218C.126 12.523 12.269.453 27.225.453"/><path fill="#212121" fill-opacity=".1" d="M61.71 53.997H27.224C12.269 53.997.126 41.927 0 26.99v.218c0 15.028 12.197 27.225 27.225 27.225h34.484c10.02 0 18.152-8.133 18.152-18.152v-.218c-.129 9.93-8.205 17.934-18.152 17.934"/></g></g><path fill="url(#SVGkwwRAdjY)" d="M92.927 119.063h-8.821c-3.738-10.581-13.811-18.15-25.664-18.15c-15.028 0-27.225 12.197-27.225 27.225s12.197 27.225 27.225 27.225h34.485c10.018 0 18.151-8.13 18.151-18.149s-8.133-18.151-18.151-18.151"/><g opacity=".1"><path fill="#fff" d="M127.777 1.335c70.35 0 127.397 56.846 127.761 127.108c0-.218.013-.435.013-.666C255.551 57.21 198.344 0 127.777 0S0 57.21 0 127.777c0 .217.015.435.015.666C.377 58.181 57.427 1.335 127.777 1.335"/><path fill="#263238" d="M255.538 127.108c-.364 70.262-57.412 127.108-127.761 127.108c-70.35 0-127.4-56.846-127.762-127.108c0 .233-.015.45-.015.669C0 198.344 57.21 255.55 127.777 255.55S255.55 198.344 255.55 127.777c0-.218-.013-.436-.013-.669"/></g><circle cx="127.777" cy="127.777" r="127.777" fill="url(#SVGTCLUYd1O)"/></g></svg>How to use the Lighthouse icon
React
import { Icon } from "@iconify/react";
<Icon icon="logos:lighthouse" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="logos:lighthouse" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="logos:lighthouse" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[logos--lighthouse]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/logos -->
<div class="i-logos:lighthouse"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="logos:lighthouse"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/logos/lighthouse.svg" alt="Lighthouse icon" width="24" height="24">Lighthouse icon in other icon sets
Lighthouse icon FAQ
Is the Lighthouse icon free for commercial use?
Yes. SVG Logos icons are released under the CC0 license, which allows use in personal and commercial projects.
How do I use the Lighthouse icon in React?
Install @iconify/react and render <Icon icon="logos:lighthouse" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Lighthouse icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/logos/lighthouse.svg" alt="Lighthouse icon">, or paste the SVG code inline to style it with CSS.