Chat History icon

Use the Chat History 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 { ChatHistory24Regular, ChatHistory24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ChatHistory24Regular aria-label="Chat History" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_chat_history_24_regular.svg" width="24" height="24" alt="Chat History">

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="M22 12C22 6.47715 17.5228 2 12 2C9.27455 2 6.80375 3.09032 5 4.85857V3.75C5 3.33579 4.66421 3 4.25 3C3.83579 3 3.5 3.33579 3.5 3.75V7.25C3.5 7.66421 3.83579 8 4.25 8H7.75C8.16421 8 8.5 7.66421 8.5 7.25C8.5 6.83579 8.16421 6.5 7.75 6.5H5.51903C7.07817 4.66459 9.40308 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C10.5322 20.5 9.12006 20.1281 7.86709 19.4295L7.59755 19.2792L3.61096 20.3914L4.72368 16.4072L4.57303 16.1375C3.87277 14.8834 3.5 13.4696 3.5 12C3.5 11.3249 3.57871 10.6681 3.72746 10.0384C3.80618 9.73697 3.79176 9.1504 3.19143 9.01849C2.57802 8.8837 2.32008 9.37256 2.25562 9.73653L2.25717 9.73685C2.08893 10.4641 2 11.2216 2 12C2 13.6203 2.38637 15.186 3.11461 16.5922L2.04695 20.4151C1.98549 20.6349 1.98546 20.8676 2.04691 21.0876C2.23258 21.7525 2.92212 22.141 3.58704 21.9553L7.41286 20.888C8.81782 21.6146 10.3817 22 12 22C17.5228 22 22 17.5228 22 12ZM12 8.75C12 8.33579 11.6642 8 11.25 8C10.8358 8 10.5 8.33579 10.5 8.75V13.25C10.5 13.6642 10.8358 14 11.25 14H14.25C14.6642 14 15 13.6642 15 13.25C15 12.8358 14.6642 12.5 14.25 12.5H12V8.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/chat_history_24_regular.svg";

Details