Phone Span Out icon
Used to represent digital changes in content on screen. Contains in and out variants. The Phone Span Out 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 Span Out 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 { PhoneSpanOut24Regular, PhoneSpanOut24Filled } from "@fluentui/react-icons";
export function Example() {
return <PhoneSpanOut24Regular aria-label="Phone Span Out" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_phone_span_out_24_regular.svg" width="24" height="24" alt="Phone Span Out"> 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="M16.4991 15.724L16.5117 15.7383C16.9107 16.1372 17.459 16.3059 18 16.2226V19.75C18 20.9409 17.0748 21.9156 15.904 21.9948L15.75 22H8.25C7.05914 22 6.08436 21.0748 6.00519 19.904L6 19.75L5.99909 16.2216C6.48619 16.2969 6.97937 16.1679 7.36416 15.8503L7.49909 15.725L7.5 19.75C7.5 20.1297 7.78215 20.4435 8.14823 20.4932L8.25 20.5H15.75C16.1297 20.5 16.4435 20.2178 16.4932 19.8518L16.5 19.75L16.4991 15.724ZM6.78115 8.96803C7.04742 9.23429 7.07162 9.65096 6.85377 9.94457L6.78115 10.0287L5.56 11.2484H9.34367C9.7061 11.2483 10 11.5841 10 11.9983C10 12.378 9.75319 12.6918 9.43288 12.7415L9.34383 12.7484H5.56L6.78115 13.9697C7.04742 14.2359 7.07162 14.6526 6.85377 14.9462L6.78115 15.0303C6.51488 15.2966 6.09822 15.3208 5.80461 15.1029L5.72049 15.0303L3.35072 12.6631C3.14219 12.5375 3 12.2874 3 11.9993C3 11.7113 3.14201 11.4611 3.35039 11.3355L5.72049 8.96803C6.01338 8.67513 6.48826 8.67513 6.78115 8.96803ZM17.2188 8.96511C17.4851 8.69884 17.9018 8.67464 18.1954 8.89249L18.2795 8.96511L20.6496 11.3325C20.858 11.4582 21 11.7083 21 11.9964C21 12.2485 20.8911 12.4715 20.7242 12.6074L20.6493 12.6602L18.2795 15.0274L18.1954 15.1C17.9344 15.2937 17.5762 15.2961 17.3128 15.1072L17.2188 15.0274L17.1462 14.9433C16.9526 14.6823 16.9502 14.3241 17.1391 14.0607L17.2188 13.9668L18.44 12.7454H14.6562L14.5671 12.7386C14.2468 12.6889 14 12.375 14 11.9953C14 11.6157 14.247 11.3019 14.5673 11.2523L14.6563 11.2454H18.44L17.2188 10.0258L17.1462 9.94165C16.9284 9.64804 16.9526 9.23138 17.2188 8.96511ZM15.75 2C16.9409 2 17.9156 2.92516 17.9948 4.09595L18 4.25L17.9998 7.76711C17.5253 7.69883 17.0281 7.82556 16.6377 8.14728L16.4993 8.27429L16.5 4.25C16.5 3.8703 16.2178 3.55651 15.8518 3.50685L15.75 3.5H8.25C7.8703 3.5 7.55651 3.78215 7.50685 4.14823L7.5 4.25L7.49973 8.2725L7.48826 8.26092C7.08236 7.85502 6.52667 7.6902 5.99912 7.76645L6 4.25C6 3.05914 6.92516 2.08436 8.09595 2.00519L8.25 2H15.75Z" 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_span_out_24_regular.svg";Details
| Name | Phone Span Out |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_phone_span_out_24_regular.svg |
| Filled file | ic_fluent_phone_span_out_24_filled.svg |
| React components | PhoneSpanOut24Regular, PhoneSpanOut24Filled |
| License | MIT (© Microsoft Corporation) |
Keywords
devicemobilesmallscreencellulartelephoneappleandroidresizescalefit