Arrow Expand All icon
Used for content expanding. The Arrow Expand All 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 Expand All 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 { ArrowExpandAll24Regular, ArrowExpandAll24Filled } from "@fluentui/react-icons";
export function Example() {
return <ArrowExpandAll24Regular aria-label="Arrow Expand All" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_arrow_expand_all_24_regular.svg" width="24" height="24" alt="Arrow Expand All"> 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="M2 4.75C2 4.33579 2.33579 4 2.75 4H21.25C21.6642 4 22 4.33579 22 4.75C22 5.16421 21.6642 5.5 21.25 5.5H2.75C2.33579 5.5 2 5.16421 2 4.75ZM12 8.75C12 8.33579 12.3358 8 12.75 8H21.25C21.6642 8 22 8.33579 22 8.75C22 9.16421 21.6642 9.5 21.25 9.5H12.75C12.3358 9.5 12 9.16421 12 8.75ZM7.28033 19.7803C7.13968 19.921 6.94891 20 6.75 20C6.55109 20 6.36032 19.921 6.21967 19.7803L3.21967 16.7803C2.92678 16.4874 2.92678 16.0126 3.21967 15.7197C3.51256 15.4268 3.98744 15.4268 4.28033 15.7197L6 17.4393V8.75C6 8.33579 6.33579 8 6.75 8C7.16421 8 7.5 8.33579 7.5 8.75V17.4393L9.21967 15.7197C9.51256 15.4268 9.98744 15.4268 10.2803 15.7197C10.5732 16.0126 10.5732 16.4874 10.2803 16.7803L7.28033 19.7803Z" 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_expand_all_24_regular.svg";Details
| Name | Arrow Expand All |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_arrow_expand_all_24_regular.svg |
| Filled file | ic_fluent_arrow_expand_all_24_filled.svg |
| React components | ArrowExpandAll24Regular, ArrowExpandAll24Filled |
| License | MIT (© Microsoft Corporation) |