Dialpad Off icon
Used to represent the interface to make a number call. The Dialpad Off 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 Dialpad Off 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 { DialpadOff24Regular, DialpadOff24Filled } from "@fluentui/react-icons";
export function Example() {
return <DialpadOff24Regular aria-label="Dialpad Off" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_dialpad_off_24_regular.svg" width="24" height="24" alt="Dialpad Off"> 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="M3.28034 2.21968C2.98745 1.92678 2.51257 1.92677 2.21968 2.21966C1.92678 2.51255 1.92677 2.98743 2.21966 3.28032L6.72135 7.7821C6.16715 7.91022 5.75403 8.40687 5.75403 9.00001C5.75403 9.69036 6.31367 10.25 7.00403 10.25C7.59716 10.25 8.0938 9.8369 8.22193 9.28271L11.7205 12.7814C11.1647 12.9083 10.75 13.4057 10.75 14C10.75 14.6904 11.3096 15.25 12 15.25C12.5943 15.25 13.0917 14.8353 13.2186 14.2795L20.7194 21.7805C21.0123 22.0734 21.4872 22.0734 21.7801 21.7805C22.073 21.4876 22.073 21.0127 21.7801 20.7198L3.28034 2.21968ZM18.246 14C18.246 14.2979 18.1418 14.5714 17.9679 14.7861L16.2098 13.0281C16.4246 12.8542 16.6981 12.75 16.996 12.75C17.6863 12.75 18.246 13.3097 18.246 14ZM13.25 9.00001C13.25 9.29887 13.1451 9.57324 12.9701 9.78831L11.2117 8.02985C11.4268 7.85489 11.7011 7.75001 12 7.75001C12.6903 7.75001 13.25 8.30965 13.25 9.00001ZM8.25403 4.00001C8.25403 4.29988 8.14844 4.57509 7.9724 4.79048L6.21358 3.03162C6.42897 2.85559 6.70417 2.75001 7.00403 2.75001C7.69438 2.75001 8.25403 3.30965 8.25403 4.00001ZM12 17.75C12.6903 17.75 13.25 18.3097 13.25 19C13.25 19.6904 12.6903 20.25 12 20.25C11.3096 20.25 10.75 19.6904 10.75 19C10.75 18.3097 11.3096 17.75 12 17.75ZM7.00403 12.75C7.69438 12.75 8.25403 13.3097 8.25403 14C8.25403 14.6904 7.69438 15.25 7.00403 15.25C6.31367 15.25 5.75403 14.6904 5.75403 14C5.75403 13.3097 6.31367 12.75 7.00403 12.75ZM16.996 7.75001C17.6863 7.75001 18.246 8.30965 18.246 9.00001C18.246 9.69036 17.6863 10.25 16.996 10.25C16.3056 10.25 15.746 9.69036 15.746 9.00001C15.746 8.30965 16.3056 7.75001 16.996 7.75001ZM12 2.75001C12.6903 2.75001 13.25 3.30965 13.25 4.00001C13.25 4.69036 12.6903 5.25001 12 5.25001C11.3096 5.25001 10.75 4.69036 10.75 4.00001C10.75 3.30965 11.3096 2.75001 12 2.75001ZM16.996 2.75001C17.6863 2.75001 18.246 3.30965 18.246 4.00001C18.246 4.69036 17.6863 5.25001 16.996 5.25001C16.3056 5.25001 15.746 4.69036 15.746 4.00001C15.746 3.30965 16.3056 2.75001 16.996 2.75001Z" 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/dialpad_off_24_regular.svg";Details
| Name | Dialpad Off |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_dialpad_off_24_regular.svg |
| Filled file | ic_fluent_dialpad_off_24_filled.svg |
| React components | DialpadOff24Regular, DialpadOff24Filled |
| License | MIT (© Microsoft Corporation) |