Document CSV icon

Use the Document CSV 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 { DocumentCsv24Regular, DocumentCsv24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DocumentCsv24Regular aria-label="Document CSV" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_document_csv_24_regular.svg" width="24" height="24" alt="Document CSV">

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.5 15C3.67122 15 3.83846 15.017 4 15.0498C4.61002 15.1736 5.13939 15.52 5.5 16C5.81388 16.4178 6 16.9372 6 17.5C6 17.8265 5.79125 18.104 5.5 18.207C5.42181 18.2347 5.33766 18.25 5.25 18.25C4.97244 18.25 4.73028 18.0991 4.60059 17.875C4.5369 17.7648 4.5 17.6365 4.5 17.5C4.5 17.1299 4.2989 16.8067 4 16.6338C3.85291 16.5487 3.68214 16.5 3.5 16.5C2.94772 16.5 2.5 16.9477 2.5 17.5V19.5C2.5 20.0523 2.94772 20.5 3.5 20.5C3.69476 20.5 3.87657 20.444 4.03027 20.3477C4.31232 20.1708 4.5 19.8574 4.5 19.5C4.5 19.3635 4.5369 19.2352 4.60059 19.125C4.73028 18.9009 4.97244 18.75 5.25 18.75C5.33766 18.75 5.42181 18.7653 5.5 18.793C5.79125 18.896 6 19.1735 6 19.5C6 19.8408 5.93209 20.1659 5.80859 20.4619C5.60837 20.9419 5.26211 21.3457 4.82617 21.6191C4.44173 21.8602 3.98726 22 3.5 22C2.11929 22 1 20.8807 1 19.5V17.5C1 16.1193 2.11929 15 3.5 15ZM9.0498 15C10.0764 15 11 15.9657 11 17C11 17.4142 10.6642 17.75 10.25 17.75C9.83579 17.75 9.5 17.4142 9.5 17V16.9502C9.5 16.7017 9.29833 16.5 9.0498 16.5H8.9502C8.70167 16.5 8.5 16.7017 8.5 16.9502V17.1836C8.5 17.2714 8.54585 17.3532 8.62109 17.3984L10.1504 18.3154C10.6775 18.6317 11 19.2017 11 19.8164V20.0498C11 20.2047 10.9824 20.3556 10.9482 20.5C10.9064 20.6772 10.8395 20.8451 10.7529 21C10.4194 21.5965 9.78178 22 9.0498 22H8.9502C8.21822 22 7.58056 21.5965 7.24707 21C7.16051 20.8451 7.09362 20.6772 7.05176 20.5C7.01765 20.3556 7 20.2047 7 20.0498V20C7 19.5858 7.33579 19.25 7.75 19.25C8.16421 19.25 8.5 19.5858 8.5 20V20.0498C8.5 20.2983 8.70167 20.5 8.9502 20.5H9.0498C9.29833 20.5 9.5 20.2983 9.5 20.0498V19.8164C9.5 19.7286 9.45415 19.6468 9.37891 19.6016L7.84961 18.6846C7.3225 18.3683 7 17.7983 7 17.1836V16.9502C7 15.8732 7.87324 15 8.9502 15H9.0498ZM15.2852 15.5225C15.4108 15.1281 15.833 14.9099 16.2275 15.0352C16.6221 15.1608 16.8403 15.5829 16.7148 15.9775L14.9648 21.4775C14.8658 21.7887 14.5766 22 14.25 22C13.9236 21.9999 13.6342 21.7886 13.5352 21.4775L11.7852 15.9775C11.6599 15.583 11.8781 15.1608 12.2725 15.0352C12.667 14.9096 13.0891 15.1281 13.2148 15.5225L14.25 18.7754L15.2852 15.5225ZM13.585 2.58594L19.4141 8.41406C19.789 8.78906 20 9.29815 20 9.82812V20C20 21.104 19.104 22 18 22H15.8301C15.8634 21.9297 15.8939 21.857 15.918 21.7812L16.3252 20.5H18C18.276 20.5 18.5 20.275 18.5 20V10H14C12.896 10 12 9.104 12 8V3.5H6C5.724 3.5 5.5 3.725 5.5 4V14.627C5.06254 14.3219 4.55195 14.1141 4 14.0352V4C4 2.896 4.896 2 6 2H12.1719C12.6958 2 13.2141 2.21533 13.585 2.58594ZM13.5 8C13.5 8.275 13.724 8.5 14 8.5H17.3779L13.5 4.62109V8Z" 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/document_csv_24_regular.svg";

Details