Channel Alert icon

Use the Channel Alert 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 { ChannelAlert24Regular, ChannelAlert24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ChannelAlert24Regular aria-label="Channel Alert" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_channel_alert_24_regular.svg" width="24" height="24" alt="Channel Alert">

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="M17.5001 12C20.5377 12 23.0001 14.4624 23.0001 17.5C23.0001 20.5376 20.5377 23 17.5001 23C14.4625 23 12.0001 20.5376 12.0001 17.5C12.0001 14.4624 14.4625 12 17.5001 12ZM4.50031 9.37208L4.5001 17.75C4.5001 18.6682 5.20721 19.4212 6.10657 19.4942L6.2501 19.5L11.3137 19.5004C11.4862 20.0342 11.7259 20.5378 12.0227 21.0012L6.2501 21C4.51707 21 3.10086 19.6435 3.00525 17.9344L3.0001 17.75L2.99981 9.37208C3.23448 9.45505 3.48702 9.5002 3.7501 9.5002C4.01315 9.5002 4.26566 9.45506 4.50031 9.37208ZM18.5001 20.0015H16.5001L16.5068 20.1181C16.5646 20.6155 16.9873 21.0015 17.5001 21.0015C18.0524 21.0015 18.5001 20.5538 18.5001 20.0015ZM17.5035 14L17.3361 14.0071C16.3993 14.0924 15.6668 14.7714 15.5272 15.6417L15.5088 15.7972L15.5032 16.0009V17.2936L14.647 18.1475C14.3524 18.4413 14.527 18.9306 14.914 18.9945L15.0001 19.0015H20.0001C20.4159 19.0015 20.6379 18.5324 20.4096 18.2137L20.3537 18.148L19.505 17.2993V15.9469L19.4995 15.8007C19.4229 14.7878 18.5559 14 17.5035 14ZM12.8066 13.0032C12.3808 13.4475 12.0175 13.9521 11.7308 14.5029L8.74786 14.5031C8.33365 14.5031 7.99786 14.1673 7.99786 13.7531C7.99786 13.3734 8.28002 13.0596 8.64609 13.0099L8.74786 13.0031L12.8066 13.0032ZM17.7501 3C19.4831 3 20.8993 4.35645 20.995 6.06558L21.0001 6.25L21.0008 12.0223C20.5375 11.7256 20.0341 11.486 19.5005 11.3136L19.5001 6.25C19.5001 5.33183 18.793 4.57881 17.8936 4.5058L17.7501 4.5H6.2501C5.64992 4.5 5.12031 4.80213 4.80507 5.2626C4.49114 5.095 4.13172 5 3.7501 5C3.56887 5 3.39265 5.02142 3.22383 5.06188C3.67711 3.90899 4.77007 3.07762 6.06568 3.00514L6.2501 3H17.7501ZM15.2523 9.49623C15.6666 9.49623 16.0023 9.83201 16.0023 10.2462C16.0023 10.6259 15.7202 10.9397 15.3541 10.9894L15.2523 10.9962H8.74786C8.33365 10.9962 7.99786 10.6604 7.99786 10.2462C7.99786 9.86653 8.28002 9.55274 8.64609 9.50307L8.74786 9.49623H15.2523ZM3.7501 6C4.44051 6 5.0002 6.55969 5.0002 7.2501C5.0002 7.94051 4.44051 8.5002 3.7501 8.5002C3.05969 8.5002 2.5 7.94051 2.5 7.2501C2.5 6.55969 3.05969 6 3.7501 6Z" 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/channel_alert_24_regular.svg";

Details

Keywords

rectanglechatannouncement