Phone Span In icon
Used to represent digital changes in content on screen. Contains in and out variants. The Phone Span In 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 In 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 { PhoneSpanIn24Regular, PhoneSpanIn24Filled } from "@fluentui/react-icons";
export function Example() {
return <PhoneSpanIn24Regular aria-label="Phone Span In" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_phone_span_in_24_regular.svg" width="24" height="24" alt="Phone Span In"> 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="M5.99991 16.0688C6.48421 16.301 7.0309 16.3034 7.50062 16.0807L7.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.4995 16.0697C16.9937 16.3004 17.5386 16.2981 18.0006 16.0815L18 19.75C18 20.9409 17.0748 21.9156 15.904 21.9948L15.75 22H8.25C7.05914 22 6.08436 21.0748 6.00519 19.904L5.99991 19.75V16.0688ZM17.7812 8.96885C18.0474 9.23512 18.0716 9.65178 17.8538 9.94539L17.7812 10.0295L16.56 11.2492H20.3437C20.7061 11.2491 21 11.5849 21 11.9991C21 12.3788 20.7532 12.6926 20.4329 12.7423L20.3438 12.7492H16.56L17.7812 13.9705C18.0474 14.2368 18.0716 14.6534 17.8538 14.947L17.7812 15.0312C17.5149 15.2974 17.0982 15.3216 16.8046 15.1038L16.7205 15.0312L14.3507 12.6639C14.1422 12.5383 14 12.2882 14 12.0001C14 11.7121 14.142 11.462 14.3504 11.3363L16.7205 8.96885C17.0134 8.67596 17.4883 8.67596 17.7812 8.96885ZM7.19539 8.89541L7.27951 8.96803L9.64961 11.3355C9.85799 11.4611 10 11.7113 10 11.9993C10 12.2514 9.89114 12.4744 9.72422 12.6104L9.64928 12.6631L7.27951 15.0303L7.19539 15.1029C6.9344 15.2966 6.57619 15.299 6.3128 15.1101L6.21885 15.0303L6.14623 14.9462C5.95258 14.6852 5.95019 14.327 6.13906 14.0636L6.21885 13.9697L7.44 12.7484H3.65617L3.56712 12.7415C3.24681 12.6918 3 12.378 3 11.9983C3 11.6186 3.24695 11.3048 3.56728 11.2552L3.65633 11.2484H7.44L6.21885 10.0287L6.14623 9.94457C5.92838 9.65096 5.95258 9.23429 6.21885 8.96803C6.48512 8.70176 6.90178 8.67756 7.19539 8.89541ZM15.75 2C16.9409 2 17.9156 2.92516 17.9948 4.09595L18 4.25L18.001 7.9176C17.5272 7.69288 16.9733 7.69304 16.4996 7.91808L16.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.50118 7.91754C7.02763 7.69227 6.47361 7.69189 5.99962 7.91647L6 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_in_24_regular.svg";Details
| Name | Phone Span In |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_phone_span_in_24_regular.svg |
| Filled file | ic_fluent_phone_span_in_24_filled.svg |
| React components | PhoneSpanIn24Regular, PhoneSpanIn24Filled |
| License | MIT (© Microsoft Corporation) |
Keywords
devicemobilesmallscreencellulartelephoneappleandroidresizescalefit