Broad Activity Feed icon

Use the Broad Activity Feed 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 { BroadActivityFeed24Regular, BroadActivityFeed24Filled } from "@fluentui/react-icons";

export function Example() {
  return <BroadActivityFeed24Regular aria-label="Broad Activity Feed" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_broad_activity_feed_24_regular.svg" width="24" height="24" alt="Broad Activity Feed">

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="M9.25498 14.0045C10.2215 14.0045 11.005 14.788 11.005 15.7545V19.2535C11.005 20.22 10.2215 21.0035 9.25498 21.0035H3.75C2.7835 21.0035 2 20.22 2 19.2535V15.7545C2 14.788 2.7835 14.0045 3.75 14.0045H9.25498ZM20.25 14.0045C21.2165 14.0045 22 14.788 22 15.7545V19.2535C22 20.22 21.2165 21.0035 20.25 21.0035H14.745C13.7785 21.0035 12.995 20.22 12.995 19.2535V15.7545C12.995 14.788 13.7785 14.0045 14.745 14.0045H20.25ZM9.25498 15.5045H3.75C3.61193 15.5045 3.5 15.6165 3.5 15.7545V19.2535C3.5 19.3915 3.61193 19.5035 3.75 19.5035H9.25498C9.39306 19.5035 9.50498 19.3915 9.50498 19.2535V15.7545C9.50498 15.6165 9.39306 15.5045 9.25498 15.5045ZM20.25 15.5045H14.745C14.6069 15.5045 14.495 15.6165 14.495 15.7545V19.2535C14.495 19.3915 14.6069 19.5035 14.745 19.5035H20.25C20.3881 19.5035 20.5 19.3915 20.5 19.2535V15.7545C20.5 15.6165 20.3881 15.5045 20.25 15.5045ZM20.25 3C21.2165 3 22 3.7835 22 4.75V10.25C22 11.2165 21.2165 12 20.25 12H3.75C2.7835 12 2 11.2165 2 10.25V4.75C2 3.83183 2.70711 3.07881 3.60647 3.0058L3.75 3H20.25ZM20.25 4.5H3.75L3.69268 4.5066C3.58223 4.53251 3.5 4.63165 3.5 4.75V10.25C3.5 10.3881 3.61193 10.5 3.75 10.5H20.25C20.3881 10.5 20.5 10.3881 20.5 10.25V4.75C20.5 4.61193 20.3881 4.5 20.25 4.5Z" 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/broad_activity_feed_24_regular.svg";

Details

Keywords

uicontenttimeline