Call Missed icon

Use the Call Missed 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 { CallMissed24Regular, CallMissed24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CallMissed24Regular aria-label="Call Missed" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_call_missed_24_regular.svg" width="24" height="24" alt="Call Missed">

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="M12.0141 2.49609C15.957 2.49609 18.8895 3.33787 20.7896 5.06532C21.7444 5.9333 22.1822 7.22707 21.9607 8.48821L21.9176 8.69802L21.7257 9.51464C21.4097 10.8593 20.1452 11.7609 18.771 11.6214L17.0164 11.4434C15.8451 11.3245 14.8793 10.4732 14.6145 9.32605L14.2253 7.6401C14.2102 7.5747 14.1694 7.51811 14.1121 7.48308C13.7907 7.28655 13.0784 7.16362 12.0141 7.16362C10.5492 7.16362 9.86128 7.39293 9.82228 7.55654L9.41365 9.32651C9.14888 10.4734 8.18359 11.3246 7.01261 11.4438L5.26692 11.6215C3.89633 11.761 2.63402 10.8648 2.31377 9.52485L2.11846 8.70767C1.80012 7.37577 2.23311 5.97625 3.24798 5.05683C5.14843 3.33511 8.07776 2.49609 12.0141 2.49609ZM12.0141 3.99609C8.41666 3.99609 5.83759 4.73479 4.25508 6.16847C3.64616 6.72013 3.38636 7.55983 3.57737 8.35897L3.77268 9.17617C3.91825 9.78522 4.49203 10.1926 5.11502 10.1292L6.86072 9.95148C7.39298 9.8973 7.83175 9.51039 7.9521 8.98909L8.36193 7.214C8.6312 6.08378 9.89168 5.66362 12.0141 5.66362C13.3321 5.66362 14.2793 5.8271 14.8947 6.20338C15.2956 6.44858 15.5811 6.84478 15.6868 7.30271L16.0761 8.98862C16.1964 9.51006 16.6354 9.89702 17.1678 9.95105L18.9224 10.1291C19.5471 10.1925 20.1218 9.78265 20.2655 9.17145L20.4574 8.35484L20.4907 8.18389C20.6056 7.44156 20.3421 6.68567 19.7806 6.17521C18.1987 4.7371 15.6173 3.99609 12.0141 3.99609ZM12.4998 14.7502C12.4998 14.336 12.164 14.0002 11.7498 14.0002C11.3355 14.0002 10.9998 14.336 10.9998 14.7502V17.2502C10.9998 17.6644 11.3356 18.0002 11.7498 18.0002H13.4998C13.914 18.0002 14.2498 17.6644 14.2498 17.2502C14.2498 16.836 13.914 16.5002 13.4998 16.5002H12.4998V14.7502ZM6.49976 16.5002C6.49976 13.4626 8.96219 11.0002 11.9998 11.0002C15.0373 11.0002 17.4998 13.4626 17.4998 16.5002C17.4998 19.5378 15.0373 22.0002 11.9998 22.0002C8.96219 22.0002 6.49976 19.5378 6.49976 16.5002ZM11.9998 12.5002C9.79062 12.5002 7.99976 14.291 7.99976 16.5002C7.99976 18.7093 9.79062 20.5002 11.9998 20.5002C14.2089 20.5002 15.9998 18.7093 15.9998 16.5002C15.9998 14.291 14.2089 12.5002 11.9998 12.5002Z" 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/call_missed_24_regular.svg";

Details

Keywords

handsetaudio