Dialpad icon

Use the Dialpad 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 { Dialpad24Regular, Dialpad24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Dialpad24Regular aria-label="Dialpad" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_dialpad_24_regular.svg" width="24" height="24" alt="Dialpad">

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="M11.9999 17.75C12.6902 17.75 13.2499 18.3096 13.2499 19C13.2499 19.6904 12.6902 20.25 11.9999 20.25C11.3095 20.25 10.7499 19.6904 10.7499 19C10.7499 18.3096 11.3095 17.75 11.9999 17.75ZM11.9999 12.75C12.6902 12.75 13.2499 13.3096 13.2499 14C13.2499 14.6904 12.6902 15.25 11.9999 15.25C11.3095 15.25 10.7499 14.6904 10.7499 14C10.7499 13.3096 11.3095 12.75 11.9999 12.75ZM16.9958 12.75C17.6862 12.75 18.2458 13.3096 18.2458 14C18.2458 14.6904 17.6862 15.25 16.9958 15.25C16.3055 15.25 15.7458 14.6904 15.7458 14C15.7458 13.3096 16.3055 12.75 16.9958 12.75ZM7.00391 12.75C7.69426 12.75 8.25391 13.3096 8.25391 14C8.25391 14.6904 7.69426 15.25 7.00391 15.25C6.31355 15.25 5.75391 14.6904 5.75391 14C5.75391 13.3096 6.31355 12.75 7.00391 12.75ZM11.9999 7.75C12.6902 7.75 13.2499 8.30964 13.2499 9C13.2499 9.69036 12.6902 10.25 11.9999 10.25C11.3095 10.25 10.7499 9.69036 10.7499 9C10.7499 8.30964 11.3095 7.75 11.9999 7.75ZM16.9958 7.75C17.6862 7.75 18.2458 8.30964 18.2458 9C18.2458 9.69036 17.6862 10.25 16.9958 10.25C16.3055 10.25 15.7458 9.69036 15.7458 9C15.7458 8.30964 16.3055 7.75 16.9958 7.75ZM7.00391 7.75C7.69426 7.75 8.25391 8.30964 8.25391 9C8.25391 9.69036 7.69426 10.25 7.00391 10.25C6.31355 10.25 5.75391 9.69036 5.75391 9C5.75391 8.30964 6.31355 7.75 7.00391 7.75ZM11.9999 2.75C12.6902 2.75 13.2499 3.30964 13.2499 4C13.2499 4.69036 12.6902 5.25 11.9999 5.25C11.3095 5.25 10.7499 4.69036 10.7499 4C10.7499 3.30964 11.3095 2.75 11.9999 2.75ZM16.9958 2.75C17.6862 2.75 18.2458 3.30964 18.2458 4C18.2458 4.69036 17.6862 5.25 16.9958 5.25C16.3055 5.25 15.7458 4.69036 15.7458 4C15.7458 3.30964 16.3055 2.75 16.9958 2.75ZM7.00391 2.75C7.69426 2.75 8.25391 3.30964 8.25391 4C8.25391 4.69036 7.69426 5.25 7.00391 5.25C6.31355 5.25 5.75391 4.69036 5.75391 4C5.75391 3.30964 6.31355 2.75 7.00391 2.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/dialpad_24_regular.svg";

Details

Keywords

calldialnumber