Street Sign icon

Use the Street Sign 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 { StreetSign24Regular, StreetSign24Filled } from "@fluentui/react-icons";

export function Example() {
  return <StreetSign24Regular aria-label="Street Sign" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_street_sign_24_regular.svg" width="24" height="24" alt="Street Sign">

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="M8 4.5C8 3.11929 9.11929 2 10.5 2C11.8807 2 13 3.11929 13 4.5V6H16.3787C16.9754 6 17.5477 6.23705 17.9697 6.65901L20.7803 9.46967C21.0732 9.76256 21.0732 10.2374 20.7803 10.5303L17.9697 13.341C17.5477 13.7629 16.9754 14 16.3787 14H13V20.75C13 21.4404 12.4404 22 11.75 22H9.25C8.55964 22 8 21.4404 8 20.75V14H5.25C4.00736 14 3 12.9926 3 11.75V8.25C3 7.00736 4.00736 6 5.25 6H8V4.5ZM9.5 6H11.5V4.5C11.5 3.94772 11.0523 3.5 10.5 3.5C9.94772 3.5 9.5 3.94772 9.5 4.5V6ZM9.5 14V20.5H11.5V14H9.5ZM4.5 8.25V11.75C4.5 12.1642 4.83579 12.5 5.25 12.5H16.3787C16.5776 12.5 16.7684 12.421 16.909 12.2803L19.1893 10L16.909 7.71967C16.7684 7.57902 16.5776 7.5 16.3787 7.5H5.25C4.83579 7.5 4.5 7.83579 4.5 8.25Z" 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/street_sign_24_regular.svg";

Details

Keywords

navigationfocusdrivinghomehouseneighborhoodpostsignarrow