Cellular Warning icon

Use the Cellular Warning 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 { CellularWarning24Regular, CellularWarning24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CellularWarning24Regular aria-label="Cellular Warning" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_cellular_warning_24_regular.svg" width="24" height="24" alt="Cellular Warning">

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.75 18.0024C4.1297 18.0024 4.44349 18.2847 4.49315 18.6508L4.5 18.7526V20.253C4.5 20.6673 4.16421 21.0031 3.75 21.0031C3.3703 21.0031 3.05651 20.7209 3.00685 20.3547L3 20.253V18.7526C3 18.3383 3.33579 18.0024 3.75 18.0024ZM11.75 12.0011C12.1297 12.0011 12.4435 12.2833 12.4932 12.6494L12.5 12.7512V17.9117L11.2669 20.3803C11.2164 20.4814 11.1735 20.5836 11.1377 20.6863C11.0695 20.5901 11.0234 20.4771 11.0068 20.3547L11 20.253V12.7512C11 12.3369 11.3358 12.0011 11.75 12.0011ZM15.2626 12.3809C15.5462 11.813 15.992 11.4199 16.5 11.2016V9.75054L16.4932 9.64875C16.4435 9.28259 16.1297 9.00037 15.75 9.00037C15.3358 9.00037 15 9.33623 15 9.75054V12.9066L15.2626 12.3809ZM19.7375 12.3809L20.494 13.8955L20.4826 6.74303L20.4749 6.64131C20.4223 6.27565 20.1094 5.99648 19.7341 6.00003C19.3247 6.00419 18.9961 6.3433 19 6.75759L19.0076 11.496C19.301 11.7173 19.5534 12.0123 19.7375 12.3809ZM7.75 14.998C8.1297 14.998 8.44349 15.2802 8.49315 15.6464L8.5 15.7482V20.2479C8.5 20.6623 8.16421 20.9981 7.75 20.9981C7.3703 20.9981 7.05651 20.7159 7.00685 20.3497L7 20.2479V15.7482C7 15.3339 7.33579 14.998 7.75 14.998ZM16.1571 12.8277L12.1602 20.8279C11.6615 21.826 12.3874 23 13.5031 23H21.4969C22.6126 23 23.3385 21.826 22.8398 20.8279L18.8429 12.8277C18.2899 11.7207 16.7102 11.7207 16.1571 12.8277ZM18.0004 15.4939V18.4963C18.0004 18.7727 17.7764 18.9967 17.5 18.9967C17.2237 18.9967 16.9996 18.7727 16.9996 18.4963V15.4939C16.9996 15.2176 17.2237 14.9935 17.5 14.9935C17.7764 14.9935 18.0004 15.2176 18.0004 15.4939ZM17.5 20.9983C17.2237 20.9983 16.9996 20.7743 16.9996 20.4979C16.9996 20.2216 17.2237 19.9975 17.5 19.9975C17.7764 19.9975 18.0004 20.2216 18.0004 20.4979C18.0004 20.7743 17.7764 20.9983 17.5 20.9983Z" 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/cellular_warning_24_regular.svg";

Details

Keywords

dataconnection