Arrow Flow Square Multiple icon
Used for scenarios involving connection points. The Arrow Flow Square Multiple 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 Arrow Flow Square Multiple 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 { ArrowFlowSquareMultiple24Regular, ArrowFlowSquareMultiple24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowFlowSquareMultiple24Regular aria-label="Arrow Flow Square Multiple" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrow_flow_square_multiple_24_regular.svg" width="24" height="24" alt="Arrow Flow Square Multiple"> 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="M19.001 6.00977C20.6791 6.13743 22.001 7.5392 22.001 9.25V15.75C22.001 19.2018 19.2028 22 15.751 22H9.25098C7.5402 22 6.13942 20.6781 6.01172 19H7.52051C7.64192 19.8479 8.36945 20.5 9.25098 20.5H15.751C18.3743 20.5 20.501 18.3734 20.501 15.75V9.25C20.501 8.36847 19.8489 7.64095 19.001 7.51953V6.00977ZM14.75 2C16.5449 2 18 3.45507 18 5.25V14.75C18 16.5449 16.5449 18 14.75 18H5.25C3.45507 18 2 16.5449 2 14.75V9.86816C2.23492 9.95135 2.48658 10 2.75 10C3.01342 10 3.26508 9.95135 3.5 9.86816V14.75C3.5 15.7165 4.2835 16.5 5.25 16.5H14.75C15.7165 16.5 16.5 15.7165 16.5 14.75V5.25C16.5 4.2835 15.7165 3.5 14.75 3.5H5.25C4.2835 3.5 3.5 4.2835 3.5 5.25V5.63086C3.26516 5.54775 3.01331 5.5 2.75 5.5C2.48669 5.5 2.23484 5.54775 2 5.63086V5.25C2 3.45507 3.45507 2 5.25 2H14.75ZM2.75 6.5C3.15851 6.5 3.51995 6.69695 3.74805 7H4.59961C6.19136 7.00006 7.68516 7.76919 8.61035 9.06445C9.25399 9.96536 10.2932 10.4999 11.4004 10.5H12.4395L10.7197 8.78027C10.4268 8.48738 10.4268 8.01262 10.7197 7.71973C11.0126 7.42683 11.4874 7.42683 11.7803 7.71973L14.7803 10.7197C15.0732 11.0126 15.0732 11.4874 14.7803 11.7803L11.7803 14.7803C11.4874 15.0732 11.0126 15.0732 10.7197 14.7803C10.4268 14.4874 10.4268 14.0126 10.7197 13.7197L12.4395 12H11.4004C9.80864 11.9999 8.31484 11.2308 7.38965 9.93555C6.74601 9.03464 5.70682 8.50006 4.59961 8.5H3.74805C3.51995 8.80305 3.15851 9 2.75 9C2.05964 9 1.5 8.44036 1.5 7.75C1.5 7.05964 2.05964 6.5 2.75 6.5Z" 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/arrow_flow_square_multiple_24_regular.svg";Details
| Name | Arrow Flow Square Multiple |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_flow_square_multiple_24_regular.svg |
| Filled file | ic_fluent_arrow_flow_square_multiple_24_filled.svg |
| React components | ArrowFlowSquareMultiple24Regular, ArrowFlowSquareMultiple24Filled |
| License | MIT (© Microsoft Corporation) |