Building Lighthouse icon

Use the Building Lighthouse icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { BuildingLighthouse24Regular, BuildingLighthouse24Filled } from "@fluentui/react-icons";

export function Example() {
  return <BuildingLighthouse24Regular aria-label="Building Lighthouse" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_building_lighthouse_24_regular.svg" width="24" height="24" alt="Building Lighthouse">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.3085 2.20962C9.72813 1.93017 10.2746 1.93017 10.6942 2.20962L14.443 4.70609C15.4726 5.39178 14.9872 6.9965 13.7501 6.9965H13.5003V9.14842C14.2619 9.44025 14.8304 10.1352 14.9304 10.9882L15.9917 20.0464C16.1136 21.0865 15.3008 22 14.2536 22H5.75511C4.70772 22 3.8949 21.0861 4.01706 20.0459L5.08081 10.9876C5.18048 10.1388 5.74419 9.44658 6.50031 9.15247V6.9965H6.25256C5.01547 6.9965 4.53005 5.39178 5.55971 4.70609L9.3085 2.20962ZM8.00031 9.00001H12.0003V6.9965H8.00031V9.00001ZM10.0013 3.55039L7.079 5.4965H12.9237L10.0013 3.55039ZM16.22 4.21968C15.9271 4.51258 15.9271 4.98745 16.22 5.28034C16.5129 5.57324 16.9878 5.57324 17.2806 5.28034L18.7806 3.78034C19.0735 3.48745 19.0735 3.01258 18.7806 2.71968C18.4878 2.42679 18.0129 2.42679 17.72 2.71968L16.22 4.21968ZM16.22 11.2803C15.9271 10.9875 15.9271 10.5126 16.22 10.2197C16.5129 9.92679 16.9878 9.92679 17.2806 10.2197L18.7806 11.7197C19.0735 12.0126 19.0735 12.4875 18.7806 12.7803C18.4878 13.0732 18.0129 13.0732 17.72 12.7803L16.22 11.2803ZM16.7503 7.00001H20.2503C20.6645 7.00001 21.0003 7.3358 21.0003 7.75001C21.0003 8.16423 20.6645 8.50001 20.2503 8.50001H16.7503C16.3361 8.50001 16.0003 8.16423 16.0003 7.75001C16.0003 7.3358 16.3361 7.00001 16.7503 7.00001ZM5.57861 19.6095L5.50682 20.2209C5.48937 20.3695 5.60549 20.5 5.75511 20.5H14.2536C14.4032 20.5 14.5193 20.3695 14.5019 20.2209L14.1297 17.0442L5.57861 19.6095ZM13.9524 15.5314L13.6204 12.697L6.12635 14.9452L5.76923 17.9863L13.9524 15.5314ZM13.4431 11.1842L13.4406 11.1627C13.3963 10.7849 13.0761 10.5 12.6957 10.5H7.31545C6.93508 10.5 6.61493 10.7848 6.57057 11.1625L6.31697 13.322L13.4431 11.1842Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/building_lighthouse_24_regular.svg";

Details

Keywords

structureconstructionarchitectureoceansea