Drafts icon
Used in editing text scenarios. The Drafts 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 Drafts 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 { Drafts24Regular, Drafts24Filled } from "@fluentui/react-icons";
export function Example() {
return <Drafts24Regular aria-label="Drafts" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_drafts_24_regular.svg" width="24" height="24" alt="Drafts"> 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="M20.8782 2.82559L21.0312 2.96997L21.1755 3.12294C22.4268 4.52817 22.3787 6.68308 21.0312 8.03063L9.06283 19.999C8.78596 20.2758 8.44162 20.4757 8.06386 20.5787L2.94817 21.9739C2.38829 22.1266 1.87456 21.6128 2.02726 21.053L3.42244 15.9373C3.52547 15.5595 3.7253 15.2152 4.00217 14.9383L15.9705 2.96997C17.3181 1.62242 19.473 1.57429 20.8782 2.82559ZM15.001 6.06088L5.06283 15.999C4.97054 16.0913 4.90393 16.206 4.86959 16.332L3.81974 20.1814L7.66918 19.1315C7.7951 19.0972 7.90988 19.0306 8.00217 18.9383L17.94 8.99988L15.001 6.06088ZM6.52583 10.9999L5.02583 12.4999L2.75083 12.5003C2.33661 12.5003 2.00083 12.1645 2.00083 11.7503C2.00083 11.3361 2.33661 11.0003 2.75083 11.0003L6.52583 10.9999ZM10.5258 6.99988L9.02583 8.49988L2.75083 8.5003C2.33661 8.5003 2.00083 8.16452 2.00083 7.7503C2.00083 7.33609 2.33661 7.0003 2.75083 7.0003L10.5258 6.99988ZM17.0312 4.03063L16.061 4.99987L19 7.93988L19.9705 6.96997C20.7822 6.1583 20.7822 4.84231 19.9705 4.03063C19.1588 3.21896 17.8428 3.21896 17.0312 4.03063ZM14.5258 2.99988L13.0258 4.49987L2.75083 4.5003C2.33661 4.5003 2.00083 4.16452 2.00083 3.7503C2.00083 3.33609 2.33661 3.0003 2.75083 3.0003L14.5258 2.99988Z" 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/drafts_24_regular.svg";Details
| Name | Drafts |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_drafts_24_regular.svg |
| Filled file | ic_fluent_drafts_24_filled.svg |
| React components | Drafts24Regular, Drafts24Filled |
| License | MIT (© Microsoft Corporation) |