Organization Horizontal icon
Used to represent general organization hierarchy & general flow charts. The Organization Horizontal icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Organization Horizontal 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 { OrganizationHorizontal24Regular, OrganizationHorizontal24Filled } from "@fluentui/react-icons";
export function Example() {
return <OrganizationHorizontal24Regular aria-label="Organization Horizontal" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_organization_horizontal_24_regular.svg" width="24" height="24" alt="Organization Horizontal"> 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="M1.99609 12.2501C1.99609 14.3225 3.67605 16.0024 5.74838 16.0024C7.56392 16.0024 9.0783 14.713 9.42573 13H11.4984V16.25C11.4984 17.4926 12.5057 18.5 13.7484 18.5H14.5738C14.9222 20.2118 16.436 21.5 18.2506 21.5C20.323 21.5 22.0029 19.82 22.0029 17.7477C22.0029 15.6754 20.323 13.9954 18.2506 13.9954C16.4343 13.9954 14.9195 15.2859 14.5729 17H13.7484C13.3341 17 12.9984 16.6642 12.9984 16.25V8.24999C12.9984 7.83578 13.3341 7.49999 13.7484 7.49999H14.5738C14.9222 9.21181 16.436 10.5 18.2506 10.5C20.323 10.5 22.0029 8.82004 22.0029 6.74771C22.0029 4.67538 20.323 2.99542 18.2506 2.99542C16.4343 2.99542 14.9195 4.2859 14.5729 5.99999H13.7484C12.5057 5.99999 11.4984 7.00735 11.4984 8.24999V11.5H9.42566C9.07812 9.78712 7.56381 8.49786 5.74838 8.49786C3.67605 8.49786 1.99609 10.1778 1.99609 12.2501ZM5.74838 14.5024C4.50448 14.5024 3.49609 13.4941 3.49609 12.2501C3.49609 11.0062 4.50448 9.99786 5.74838 9.99786C6.99228 9.99786 8.00066 11.0062 8.00066 12.2501C8.00066 13.4941 6.99228 14.5024 5.74838 14.5024ZM18.2506 20C17.0067 20 15.9984 18.9916 15.9984 17.7477C15.9984 16.5038 17.0067 15.4954 18.2506 15.4954C19.4945 15.4954 20.5029 16.5038 20.5029 17.7477C20.5029 18.9916 19.4945 20 18.2506 20ZM15.9984 6.74771C15.9984 5.50381 17.0067 4.49542 18.2506 4.49542C19.4945 4.49542 20.5029 5.50381 20.5029 6.74771C20.5029 7.99161 19.4945 8.99999 18.2506 8.99999C17.0067 8.99999 15.9984 7.99161 15.9984 6.74771Z" 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/organization_horizontal_24_regular.svg";Details
| Name | Organization Horizontal |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_organization_horizontal_24_regular.svg |
| Filled file | ic_fluent_organization_horizontal_24_filled.svg |
| React components | OrganizationHorizontal24Regular, OrganizationHorizontal24Filled |
| License | MIT (© Microsoft Corporation) |