Ink Stroke Arrow Down icon

Use the Ink Stroke Arrow Down 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 { InkStrokeArrowDown24Regular, InkStrokeArrowDown24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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.7024C18.8723 11.7956 19.1655 11.9034 19.4187 12.0313C18.8172 12.1466 18.3252 12.5697 18.1129 13.1303C17.7361 13.014 17.2704 12.9018 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.05115 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.93027ZM18 13.75V14.7734C17.026 15.0101 15.6644 15.2364 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.8448 13.7043 17.2514 13.4417 18.0885 13.1992C18.0311 13.3724 18 13.5575 18 13.75ZM20.5 13.75C20.5 13.3358 20.1642 13 19.75 13C19.3358 13 19 13.3358 19 13.75V20.4393L17.7803 19.2197C17.4874 18.9268 17.0126 18.9268 16.7197 19.2197C16.4268 19.5126 16.4268 19.9874 16.7197 20.2803L19.2197 22.7803C19.5126 23.0732 19.9874 23.0732 20.2803 22.7803L22.7803 20.2803C23.0732 19.9874 23.0732 19.5126 22.7803 19.2197C22.4874 18.9268 22.0126 18.9268 21.7197 19.2197L20.5 20.4393V13.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/ink_stroke_arrow_down_24_regular.svg";

Details

Keywords

editcreatedrawpenscribblearrow