Dual Screen Arrow Up icon
Used in foldable screen scenarios. The Dual Screen Arrow Up 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 Dual Screen Arrow Up 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 { DualScreenArrowUp24Regular, DualScreenArrowUp24Filled } from "@fluentui/react-icons";
export function Example() {
return <DualScreenArrowUp24Regular aria-label="Dual Screen Arrow Up" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_dual_screen_arrow_up_24_regular.svg" width="24" height="24" alt="Dual Screen Arrow Up"> 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="M22 6.5C22 9.53757 19.5376 12 16.5 12C13.4624 12 11 9.53757 11 6.5C11 3.46243 13.4624 1 16.5 1C19.5376 1 22 3.46243 22 6.5ZM16 4.70711V9.5C16 9.77614 16.2239 10 16.5 10C16.7761 10 17 9.77614 17 9.5V4.70711L18.6464 6.35355C18.8417 6.54882 19.1583 6.54882 19.3536 6.35355C19.5488 6.15829 19.5488 5.84171 19.3536 5.64645L16.8536 3.14645C16.6583 2.95118 16.3417 2.95118 16.1464 3.14645L13.6464 5.64645C13.4512 5.84171 13.4512 6.15829 13.6464 6.35355C13.8417 6.54882 14.1583 6.54882 14.3536 6.35355L16 4.70711ZM10 6.5C10 6.33228 10.0064 6.16605 10.0188 6.00153L3.75 6.00122C2.7835 6.00122 2 6.78472 2 7.75122V20.2463C2 21.2128 2.7835 21.9963 3.75 21.9963L11.247 21.9962L11.2476 21.9988H20.2451C21.2116 21.9988 21.9951 21.2153 21.9951 20.2488L21.996 9.97207C21.5943 10.6065 21.0859 11.1666 20.4958 11.6271L20.4951 20.2488C20.4951 20.3869 20.3832 20.4988 20.2451 20.4988H12.7476L12.7475 11.808C12.1707 11.3995 11.6634 10.8994 11.2468 10.3288L11.2476 20.4963H3.75C3.61193 20.4963 3.5 20.3844 3.5 20.2463V7.75122C3.5 7.61315 3.61193 7.50122 3.75 7.50122L10.0767 7.50191C10.0262 7.17534 10 6.84073 10 6.5ZM16.9887 18.25C16.9887 17.8358 16.6529 17.5 16.2387 17.5H14.7387L14.637 17.5068C14.2709 17.5565 13.9887 17.8703 13.9887 18.25C13.9887 18.6642 14.3245 19 14.7387 19H16.2387L16.3405 18.9932C16.7066 18.9435 16.9887 18.6297 16.9887 18.25ZM9.99289 18.25C9.99289 17.8358 9.6571 17.5 9.24289 17.5H7.7412L7.63943 17.5068C7.27335 17.5565 6.9912 17.8703 6.9912 18.25C6.9912 18.6642 7.32698 19 7.7412 19H9.24289L9.34466 18.9932C9.71074 18.9435 9.99289 18.6297 9.99289 18.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/dual_screen_arrow_up_24_regular.svg";Details
| Name | Dual Screen Arrow Up |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_dual_screen_arrow_up_24_regular.svg |
| Filled file | ic_fluent_dual_screen_arrow_up_24_filled.svg |
| React components | DualScreenArrowUp24Regular, DualScreenArrowUp24Filled |
| License | MIT (© Microsoft Corporation) |