Gantt Chart icon
Used to represent a Gnatt chart, which helps teams to plan work around deadlines and properly allocate resources The Gantt Chart icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Gantt Chart 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 { GanttChart24Regular, GanttChart24Filled } from "@fluentui/react-icons";
export function Example() {
return <GanttChart24Regular aria-label="Gantt Chart" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_gantt_chart_24_regular.svg" width="24" height="24" alt="Gantt Chart"> 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="M6 8C5.44772 8 5 8.44772 5 9C5 9.55228 5.44772 10 6 10H10C10.5523 10 11 9.55228 11 9C11 8.44772 10.5523 8 10 8H6ZM11 12C11 11.4477 11.4477 11 12 11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H12C11.4477 13 11 12.5523 11 12ZM15 14C14.4477 14 14 14.4477 14 15C14 15.5523 14.4477 16 15 16H18C18.5523 16 19 15.5523 19 15C19 14.4477 18.5523 14 18 14H15ZM5.25 4C3.45507 4 2 5.45507 2 7.25V16.75C2 18.5449 3.45507 20 5.25 20H18.75C20.5449 20 22 18.5449 22 16.75V7.25C22 5.45507 20.5449 4 18.75 4H5.25ZM8 5.5V7H9.5V5.5H14.5V10H16V5.5H18.75C19.7165 5.5 20.5 6.2835 20.5 7.25V16.75C20.5 17.7165 19.7165 18.5 18.75 18.5H16V17H15C14.8274 17 14.6598 16.9781 14.5 16.937V18.5H9.5V11H8V18.5H5.25C4.2835 18.5 3.5 17.7165 3.5 16.75V7.25C3.5 6.2835 4.2835 5.5 5.25 5.5H8Z" 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/gantt_chart_24_regular.svg";Details
| Name | Gantt Chart |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_gantt_chart_24_regular.svg |
| Filled file | ic_fluent_gantt_chart_24_filled.svg |
| React components | GanttChart24Regular, GanttChart24Filled |
| License | MIT (© Microsoft Corporation) |