Phone Vertical Scroll icon
Used to represent scrolling scenarios on phone. The Phone Vertical Scroll 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 Phone Vertical Scroll 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 { PhoneVerticalScroll24Regular, PhoneVerticalScroll24Filled } from "@fluentui/react-icons";
export function Example() {
return <PhoneVerticalScroll24Regular aria-label="Phone Vertical Scroll" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_phone_vertical_scroll_24_regular.svg" width="24" height="24" alt="Phone Vertical Scroll"> 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="M15.75 2C16.9926 2 18 3.00736 18 4.25V19.75C18 20.9926 16.9926 22 15.75 22H8.25C7.00736 22 6 20.9926 6 19.75V4.25C6 3.00736 7.00736 2 8.25 2H15.75ZM15.75 3.5H8.25C7.83579 3.5 7.5 3.83579 7.5 4.25V19.75C7.5 20.1642 7.83579 20.5 8.25 20.5H15.75C16.1642 20.5 16.5 20.1642 16.5 19.75V4.25C16.5 3.83579 16.1642 3.5 15.75 3.5ZM14.775 13.4644C15.0439 13.7279 15.0723 14.1443 14.8574 14.4401L14.7856 14.525L12.5356 16.8208C12.2684 17.0934 11.8451 17.1183 11.5493 16.8954L11.4647 16.8211L9.21175 14.5253C8.92163 14.2297 8.92611 13.7548 9.22175 13.4647C9.49051 13.201 9.90738 13.1807 10.1989 13.4013L10.2824 13.4747L11.9997 15.2246L13.7144 13.475C14.0043 13.1792 14.4791 13.1744 14.775 13.4644ZM12.5356 7.22504L14.7856 9.52083C15.0756 9.81666 15.0708 10.2915 14.775 10.5814C14.4791 10.8714 14.0043 10.8666 13.7144 10.5708L11.9997 8.82115L10.2824 10.5711C9.99224 10.8667 9.51738 10.8712 9.22175 10.5811C8.92611 10.291 8.92163 9.81612 9.21175 9.52048L11.4647 7.22469C11.7588 6.92497 12.2417 6.92512 12.5356 7.22504Z" 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/phone_vertical_scroll_24_regular.svg";Details
| Name | Phone Vertical Scroll |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_phone_vertical_scroll_24_regular.svg |
| Filled file | ic_fluent_phone_vertical_scroll_24_filled.svg |
| React components | PhoneVerticalScroll24Regular, PhoneVerticalScroll24Filled |
| License | MIT (© Microsoft Corporation) |