Ink Stroke Arrow Up Down icon
Used to represent pen details with arrow tips in drawing scenarios. The Ink Stroke Arrow Up Down 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 Ink Stroke Arrow Up 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 { InkStrokeArrowUpDown24Regular, InkStrokeArrowUpDown24Filled } from "@fluentui/react-icons";
export function Example() {
return <InkStrokeArrowUpDown24Regular aria-label="Ink Stroke Arrow Up Down" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_ink_stroke_arrow_up_down_24_regular.svg" width="24" height="24" alt="Ink Stroke Arrow Up 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.2221 11.3632 17.4054 11.4019 17.5831 11.442L16.3091 12.716C15.3412 12.5431 14.2458 12.4033 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.93027ZM15.5864 13.7056C15.4258 14.1978 15.4891 14.747 15.7761 15.1942C15.2004 15.2821 14.5589 15.3684 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.9639C14.3907 13.8779 15.0271 13.7915 15.5864 13.7056ZM20.2803 11.2197C19.9874 10.9268 19.5126 10.9268 19.2197 11.2197L16.7197 13.7197C16.4268 14.0126 16.4268 14.4874 16.7197 14.7803C17.0126 15.0732 17.4874 15.0732 17.7803 14.7803L19 13.5607V20.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.5607L21.7197 14.7803C22.0126 15.0732 22.4874 15.0732 22.7803 14.7803C23.0732 14.4874 23.0732 14.0126 22.7803 13.7197L20.2803 11.2197Z" 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_up_down_24_regular.svg";Details
| Name | Ink Stroke Arrow Up Down |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_ink_stroke_arrow_up_down_24_regular.svg |
| Filled file | ic_fluent_ink_stroke_arrow_up_down_24_filled.svg |
| React components | InkStrokeArrowUpDown24Regular, InkStrokeArrowUpDown24Filled |
| License | MIT (© Microsoft Corporation) |