Ink Stroke icon

Use the Ink Stroke 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 { InkStroke24Regular, InkStroke24Filled } from "@fluentui/react-icons";

export function Example() {
  return <InkStroke24Regular aria-label="Ink Stroke" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_ink_stroke_24_regular.svg" width="24" height="24" alt="Ink Stroke">

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.2533 2.93027C3.29183 2.51786 3.65739 2.21477 4.0698 2.2533L7.81487 2.60321C10.4674 2.86629 13.0078 3.18295 15.0931 3.54211C17.1396 3.89458 18.8569 4.30442 19.7809 4.79205C20.0179 4.91711 20.26 5.07587 20.4425 5.28418C20.6346 5.50358 20.805 5.83602 20.7333 6.24139C20.6675 6.61326 20.4257 6.87325 20.2124 7.04108C19.9907 7.21554 19.7093 7.36263 19.3952 7.49274C18.1608 8.00422 15.8004 8.49799 12.0669 8.98635C9.68715 9.29762 8.17168 9.60069 7.30854 9.8752C7.3337 9.88296 7.35958 9.89079 7.38618 9.89868C7.79685 10.0204 8.31975 10.1393 8.93365 10.2521C10.1601 10.4773 11.7019 10.6697 13.3376 10.816C14.5778 10.927 15.9045 11.1028 17.0345 11.3262C17.599 11.4378 18.1254 11.5634 18.5725 11.7024C19.0036 11.8364 19.421 12.0006 19.7252 12.2114C19.8759 12.3158 20.0601 12.4729 20.179 12.7007C20.3167 12.9644 20.3422 13.2808 20.2082 13.5812C20.0928 13.8398 19.8909 14.0147 19.7192 14.1308C19.5387 14.2528 19.3222 14.3562 19.085 14.4476C18.1584 14.8047 16.4814 15.1389 13.8476 15.4533C11.2304 15.7658 9.63138 16.164 8.73798 16.5695C8.28977 16.773 8.08787 16.9481 8.00792 17.0529C7.95876 17.1173 7.96472 17.1357 7.96925 17.1497L7.97062 17.1543C7.98609 17.2138 8.05207 17.3475 8.25832 17.545C8.45682 17.7351 8.73792 17.9392 9.09014 18.1473C9.79199 18.5621 10.6915 18.9438 11.5555 19.2395L14.802 20.286C15.1962 20.4131 15.4128 20.8357 15.2857 21.2299C15.1586 21.6241 14.736 21.8407 14.3418 21.7136L11.0764 20.6611C10.1531 20.3454 9.1483 19.924 8.32702 19.4387C7.91685 19.1963 7.53111 18.9255 7.22083 18.6283C6.91832 18.3386 6.63359 17.9726 6.51895 17.5319C6.39274 17.0466 6.49659 16.5607 6.81558 16.1428C7.1092 15.7581 7.56398 15.4551 8.11806 15.2036C9.22925 14.6993 11.0173 14.2806 13.6698 13.9639C15.9565 13.6909 17.3938 13.4147 18.2129 13.162C18.1852 13.153 18.1566 13.1439 18.1272 13.1347C17.7479 13.0168 17.2771 12.9031 16.7436 12.7977C15.6776 12.5869 14.4051 12.4175 13.2039 12.31C11.5417 12.1613 9.95042 11.9639 8.66266 11.7274C8.01946 11.6092 7.44 11.4792 6.9598 11.3368C6.49893 11.2001 6.05952 11.0326 5.74828 10.8118C5.59401 10.7023 5.39759 10.5289 5.28763 10.2697C5.15791 9.96394 5.19075 9.63917 5.3477 9.36881C5.48199 9.13749 5.68612 8.97877 5.8637 8.8689C6.05114 8.75292 6.27542 8.6512 6.52433 8.55879C7.50067 8.19632 9.22868 7.84484 11.8723 7.49904C15.6205 7.00876 17.7938 6.53264 18.8211 6.107C18.8665 6.08817 18.9084 6.06996 18.9469 6.05244C18.2151 5.71225 16.7872 5.35594 14.8385 5.02032C12.8024 4.66963 10.3016 4.35723 7.66896 4.09609L3.93027 3.74678C3.51786 3.70825 3.21477 3.34268 3.2533 2.93027Z" 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/ink_stroke_24_regular.svg";

Details

Keywords

editcreatedrawpenscribble