Lighthouse icon
noto:lighthouse
The Lighthouse icon (noto:lighthouse) is a free SVG icon from the Noto Emoji set by Google Inc. It is drawn on a 128 × 128 grid. Noto Emoji icons are released under the Apache 2.0 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
- Noto Emoji
- Author
- Google Inc
- License
- Apache-2.0
- Size
- 128 × 128
- Category
- Travel & Places
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><linearGradient id="SVGZ4ajl0rf" x1="67.982" x2="122.506" y1="25.513" y2="25.513" gradientUnits="userSpaceOnUse"><stop offset=".114" stop-color="#fff1af"/><stop offset=".928" stop-color="#fff1af" stop-opacity=".081"/><stop offset="1" stop-color="#fff1af" stop-opacity="0"/></linearGradient><path fill="url(#SVGZ4ajl0rf)" d="M58.008 18.818v12.819L124.3 43.334V7.693z"/><path fill="#ffcf18" d="M43.983 39.27V16.99h19.64v22.048H46.865c.02-1.278-1.346 0-2.882.231"/><path fill="#ffa000" d="M50.985 15.28v20.81h-7.002v-19.1z"/><path fill="#ffa000" d="m63.623 16.99l-13.638-.22v3.516h3.817c5.424 0 9.373-1.344 9.821-3.296"/><path fill="#5e6268" d="M63.623 16.99s-1.03-8.257-9.82-8.257s-9.82 8.257-9.82 8.257z"/><circle cx="53.803" cy="6.812" r="2.812" fill="#5e6268"/><path fill="#ffff8d" d="M49.61 28.678c-.703-.847-1.2-1.765-1.2-2.993s.497-2.145 1.2-2.992c0 0-.95-.325-.794-.692c.383-.9 2.29-1.567 2.29-1.567s-.885-.54-.56-.86c.637-.634 2.125-1.003 3.257-1.003s2.62.37 3.258 1.002c.324.322-.562.861-.562.861s1.908.667 2.291 1.567c.157.367-.794.692-.794.692c.703.847 1.2 1.764 1.2 2.992s-.497 2.146-1.2 2.993c0 0 .95.325.794.692c-.383.9-2.29 1.566-2.29 1.566s.885.54.56.861c-.637.633-2.125 1.003-3.257 1.003s-2.62-.37-3.258-1.003c-.324-.321.562-.86.562-.86s-1.908-.667-2.291-1.567c-.157-.367.794-.692.794-.692"/><ellipse cx="55.382" cy="25.685" fill="#fff" rx="2.76" ry="3.359"/><ellipse cx="55.069" cy="21.833" fill="#fff" rx="2.525" ry=".651"/><ellipse cx="54.289" cy="20.31" fill="#fff" rx="1.853" ry=".478"/><ellipse cx="54.961" cy="29.57" fill="#fff" rx="2.525" ry=".651"/><ellipse cx="54.289" cy="31.093" fill="#fff" rx="1.853" ry=".478"/><path fill="#fff" d="M96.776 46.025c.887.92.716 2.214-.064 2.962c-.781.748-2.214.45-2.76-.107c-.78-.78-.822-2.288 0-3.004c.653-.567 1.83-.877 2.824.15" opacity=".56"/><path fill="#fff" d="M88.918 57.772c1.7-.107 2.726 1.572 2.662 2.759c-.064 1.198-.813 2.694-2.898 2.727c-2.416.032-2.694-2.46-2.491-3.38c.128-.555.545-1.967 2.727-2.106m20.51 28.134c-.514 1.347-2.139 2.3-3.85 1.444c-1.689-.845-1.732-2.684-1.026-3.989s2.577-1.379 3.603-.887c1.027.503 1.84 1.946 1.273 3.432"/><path fill="#fff" d="M14.089 64.78c.92 1.358.951 3.069-.171 4.052c-1.123.984-3.197.888-4.288-.61c-1.026-1.4-.78-3.025.267-4.052s3.272-.748 4.192.61" opacity=".56"/><path fill="#fff" d="M25.18 50.248c.866.92 1.197 2.598.032 3.614c-.984.856-2.62.652-3.4-.374s-.481-2.588.203-3.304c.674-.727 2.17-.994 3.165.064m.291-32.865s-1.261-3.881-1.956-4.01c-.695-.128-2.224 4.01-2.224 4.01s-3.272.171-3.529.877c-.256.695 2.438 2.79 2.438 2.79s-1.048 3.615-.61 3.968c.44.352 3.968-1.872 3.968-1.872s2.919 2.791 3.742 2.353c.823-.439-.61-4.363-.61-4.363s2.834-1.828 2.877-2.833s-4.096-.92-4.096-.92"/><path fill="#ffcf18" d="M43.422 40.113c1.613-.243 2.815-.37 2.99-.243c.048.035.058.788.038 2.13h-3.028z"/><path fill="#5e6268" d="m38.312 36.141l3.903 5.86l11.588.025l11.589-.025l3.902-5.86z"/><path fill="#848e9b" d="M68.512 34.567H39.094c-.545 0-.987.447-.987 1s.442 1 .987 1h29.418c.545 0 .987-.448.987-1s-.442-1-.987-1"/><defs><path id="SVGU2ecqc4n" d="M65.11 39.269H42.496l-7.545 69.889h37.704z"/></defs><clipPath id="SVGyxiR0wPG"><use href="#SVGU2ecqc4n"/></clipPath><g clip-path="url(#SVGyxiR0wPG)"><path fill="#f1edec" d="M75.931 42h-29.62c-.18 3.116-.58 9.31-1.074 16.79H75.93z"/><path fill="#d8cdc9" d="m38.795 42l-5.182 4.44v12.35h11.624c.495-7.48.895-13.674 1.073-16.79z"/><path fill="#ff2a23" d="M75.931 58.79H45.237c-.344 5.181-.732 10.976-1.125 16.789h31.82z"/><path fill="#dc0d27" d="M33.613 58.79v16.789h10.5c.392-5.813.78-11.608 1.124-16.79z"/><path fill="#f1edec" d="M75.931 75.579H44.112c-.39 5.778-.783 11.568-1.14 16.79h32.96z"/><path fill="#d8cdc9" d="M33.613 75.579v16.79h9.36c.356-5.222.75-11.012 1.14-16.79z"/><path fill="#ff2a23" d="M75.931 92.368H42.973c-.491 7.201-.91 13.313-1.15 16.79h34.108z"/><path fill="#dc0d27" d="M33.613 92.368v16.79h8.21c.24-3.477.659-9.589 1.15-16.79z"/></g><path fill="#404449" d="M60.609 109.137h7.86v-8.944a3.93 3.93 0 1 0-7.86 0zm-9.618-37.659h5.624v-5.777a2.812 2.812 0 0 0-5.623 0z"/><path fill="#868c93" d="m97.674 118.77l-8.353-1.226l-1.911-2.658l-9.984-2.611l-2.81-3.138l-5.7.02H33.553l-5.345 5.06h-7.52l-5.879 4.554l-4.785 1.344L7.7 124h94.452c-1.825-2.147-4.478-5.23-4.478-5.23"/><path fill="#d8cdc9" d="M74.615 113.042H58.563v-3.885h16.052zm4.905 5.48H65.636v-3.885H79.52zm-3.785 1.593h10.664V124H75.735z"/><path fill="#676c70" d="M45.115 120.98L41.121 116l3.447-2.978l1.368-3.864H33.553l-5.345 5.059h-7.52l-5.879 4.554l-4.785 1.344L7.7 124h35.356z"/><path fill="#868c93" d="m32.537 115.601l5.411.399l1.881 4.482l-4.838 2.191l-7.467-3.902z"/><path fill="#4d5359" d="m29.687 119.901l-2.163-1.13l-6.152-.929l-3.691 3.079L19.635 124h6.18z"/><path fill="#676c70" d="m62.742 124l-3.59-4.152l-4.922-1.077l-3.555 2.549l1.239 2.68z"/></svg>How to use the Lighthouse icon
React
import { Icon } from "@iconify/react";
<Icon icon="noto:lighthouse" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="noto:lighthouse" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="noto:lighthouse" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[noto--lighthouse]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/noto -->
<div class="i-noto:lighthouse"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="noto:lighthouse"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/noto/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. Noto Emoji icons are released under the Apache 2.0 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="noto: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/noto/lighthouse.svg" alt="Lighthouse icon">, or paste the SVG code inline to style it with CSS.