Lighthouse icon
whh:lighthouse
The Lighthouse icon (whh:lighthouse) is a free SVG icon from the WebHostingHub Glyphs set by WebHostingHub. It is drawn on a 1024 × 1024 grid. WebHostingHub Glyphs icons are released under the Open Font 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
- WebHostingHub Glyphs
- Author
- WebHostingHub
- License
- OFL-1.1
- Size
- 1024 × 1024
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><path fill="currentColor" d="m768 192l256-128v320L768 256zm-64 128q0 23-15 41t-38 22l12 65H361l12-65q-23-4-38-22t-15-41V128h-64L512 0l256 128h-64zM512 160q0-13-9.5-22.5T480 128h-64q-13 0-22.5 9.5T384 160v128q0 13 9.5 22.5T416 320h64q13 0 22.5-9.5T512 288zm128 0q0-13-9.5-22.5T608 128t-22.5 9.5T576 160v128q0 13 9.5 22.5T608 320t22.5-9.5T640 288zm-384 96L0 384V64l256 128zm419 256l11 64H337l12-64zm35 192H314l12-64h372zM287 852l16-84h418l16 84q129 24 208 70t79 102H0q0-56 79-102t208-70"/></svg>
How to use the Lighthouse icon
React
import { Icon } from "@iconify/react";
<Icon icon="whh:lighthouse" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="whh:lighthouse" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="whh:lighthouse" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[whh--lighthouse]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/whh -->
<div class="i-whh:lighthouse"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="whh:lighthouse"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/whh/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. WebHostingHub Glyphs icons are released under the Open Font 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="whh: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/whh/lighthouse.svg" alt="Lighthouse icon">, or paste the SVG code inline to style it with CSS.
Browse all WebHostingHub Glyphs icons →
ICONYZ
