ink stroke arrow up down icon
ink-stroke-arrow-up-down-20-regular from Fluent UI System Icons by Microsoft Corporation · 20 Regular · MIT Free for personal and commercial use.
- Name
- ink-stroke-arrow-up-down-20-regular
- Set
- Fluent UI System Icons
- Style
- 20 Regular
- Viewbox
- 20×20
- License
- MIT
3 other variants in Fluent UI System Icons
Related icons in Fluent UI System Icons
Use the ink stroke arrow up down icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M3.002 2.955a.5.5 0 0 1 .543-.453l3.042.272c2.153.205 4.214.45 5.904.73c1.665.274 3.04.59 3.772.96c.186.094.37.21.507.36a.8.8 0 0 1 .217.686c-.049.267-.229.452-.39.574a2.8 2.8 0 0 1-.637.336c-.986.391-2.888.774-5.923 1.154c-2.147.269-3.44.53-4.106.767l-.02.007q.13.046.304.096c.34.096.769.19 1.27.278c1.002.176 2.259.326 3.59.44c1.004.086 2.078.222 2.99.395c.37.07.718.147 1.027.23l-.83.83a17 17 0 0 0-.383-.078a30 30 0 0 0-2.89-.38c-1.347-.116-2.636-.27-3.677-.452c-.52-.092-.986-.192-1.37-.301c-.372-.105-.713-.231-.95-.392a.94.94 0 0 1-.342-.385a.68.68 0 0 1 .044-.642c.1-.163.25-.276.386-.356q.217-.127.516-.232c.778-.276 2.17-.549 4.317-.817c3.044-.382 4.826-.753 5.678-1.091q.158-.063.257-.116l-.036-.019c-.574-.29-1.8-.588-3.484-.866c-1.658-.274-3.694-.517-5.834-.72l-3.039-.272a.5.5 0 0 1-.453-.543m10.437 8.484c-.27.27-.415.617-.436.97q-.68.098-1.517.194c-2.13.244-3.445.555-4.189.879c-.374.162-.555.307-.634.406c-.06.075-.052.107-.044.137c.017.063.082.18.257.34c.17.155.405.319.696.483c.58.328 1.32.628 2.026.86l2.64.814a.5.5 0 0 1-.296.956l-2.65-.818c-.746-.244-1.554-.569-2.212-.941a5 5 0 0 1-.88-.616c-.238-.219-.458-.49-.546-.816a1.13 1.13 0 0 1 .227-1.023c.225-.282.577-.508 1.018-.7c.884-.384 2.321-.708 4.473-.954a42 42 0 0 0 2.198-.301zm3.415-1.293a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 .708.708L16 11.707v5.586l-1.146-1.147a.5.5 0 0 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L17 17.293v-5.586l1.146 1.147a.5.5 0 0 0 .708-.708z"/></svg>
React
import type { SVGProps } from "react";
export function FluentInkStrokeArrowUpDown20Regular(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M3.002 2.955a.5.5 0 0 1 .543-.453l3.042.272c2.153.205 4.214.45 5.904.73c1.665.274 3.04.59 3.772.96c.186.094.37.21.507.36a.8.8 0 0 1 .217.686c-.049.267-.229.452-.39.574a2.8 2.8 0 0 1-.637.336c-.986.391-2.888.774-5.923 1.154c-2.147.269-3.44.53-4.106.767l-.02.007q.13.046.304.096c.34.096.769.19 1.27.278c1.002.176 2.259.326 3.59.44c1.004.086 2.078.222 2.99.395c.37.07.718.147 1.027.23l-.83.83a17 17 0 0 0-.383-.078a30 30 0 0 0-2.89-.38c-1.347-.116-2.636-.27-3.677-.452c-.52-.092-.986-.192-1.37-.301c-.372-.105-.713-.231-.95-.392a.94.94 0 0 1-.342-.385a.68.68 0 0 1 .044-.642c.1-.163.25-.276.386-.356q.217-.127.516-.232c.778-.276 2.17-.549 4.317-.817c3.044-.382 4.826-.753 5.678-1.091q.158-.063.257-.116l-.036-.019c-.574-.29-1.8-.588-3.484-.866c-1.658-.274-3.694-.517-5.834-.72l-3.039-.272a.5.5 0 0 1-.453-.543m10.437 8.484c-.27.27-.415.617-.436.97q-.68.098-1.517.194c-2.13.244-3.445.555-4.189.879c-.374.162-.555.307-.634.406c-.06.075-.052.107-.044.137c.017.063.082.18.257.34c.17.155.405.319.696.483c.58.328 1.32.628 2.026.86l2.64.814a.5.5 0 0 1-.296.956l-2.65-.818c-.746-.244-1.554-.569-2.212-.941a5 5 0 0 1-.88-.616c-.238-.219-.458-.49-.546-.816a1.13 1.13 0 0 1 .227-1.023c.225-.282.577-.508 1.018-.7c.884-.384 2.321-.708 4.473-.954a42 42 0 0 0 2.198-.301zm3.415-1.293a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 .708.708L16 11.707v5.586l-1.146-1.147a.5.5 0 0 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L17 17.293v-5.586l1.146 1.147a.5.5 0 0 0 .708-.708z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M3.002 2.955a.5.5 0 0 1 .543-.453l3.042.272c2.153.205 4.214.45 5.904.73c1.665.274 3.04.59 3.772.96c.186.094.37.21.507.36a.8.8 0 0 1 .217.686c-.049.267-.229.452-.39.574a2.8 2.8 0 0 1-.637.336c-.986.391-2.888.774-5.923 1.154c-2.147.269-3.44.53-4.106.767l-.02.007q.13.046.304.096c.34.096.769.19 1.27.278c1.002.176 2.259.326 3.59.44c1.004.086 2.078.222 2.99.395c.37.07.718.147 1.027.23l-.83.83a17 17 0 0 0-.383-.078a30 30 0 0 0-2.89-.38c-1.347-.116-2.636-.27-3.677-.452c-.52-.092-.986-.192-1.37-.301c-.372-.105-.713-.231-.95-.392a.94.94 0 0 1-.342-.385a.68.68 0 0 1 .044-.642c.1-.163.25-.276.386-.356q.217-.127.516-.232c.778-.276 2.17-.549 4.317-.817c3.044-.382 4.826-.753 5.678-1.091q.158-.063.257-.116l-.036-.019c-.574-.29-1.8-.588-3.484-.866c-1.658-.274-3.694-.517-5.834-.72l-3.039-.272a.5.5 0 0 1-.453-.543m10.437 8.484c-.27.27-.415.617-.436.97q-.68.098-1.517.194c-2.13.244-3.445.555-4.189.879c-.374.162-.555.307-.634.406c-.06.075-.052.107-.044.137c.017.063.082.18.257.34c.17.155.405.319.696.483c.58.328 1.32.628 2.026.86l2.64.814a.5.5 0 0 1-.296.956l-2.65-.818c-.746-.244-1.554-.569-2.212-.941a5 5 0 0 1-.88-.616c-.238-.219-.458-.49-.546-.816a1.13 1.13 0 0 1 .227-1.023c.225-.282.577-.508 1.018-.7c.884-.384 2.321-.708 4.473-.954a42 42 0 0 0 2.198-.301zm3.415-1.293a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 .708.708L16 11.707v5.586l-1.146-1.147a.5.5 0 0 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L17 17.293v-5.586l1.146 1.147a.5.5 0 0 0 .708-.708z"/></svg> </template>
CSS
.icon-ink-stroke-arrow-up-down-20-regular {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M3.002%202.955a.5.5%200%200%201%20.543-.453l3.042.272c2.153.205%204.214.45%205.904.73c1.665.274%203.04.59%203.772.96c.186.094.37.21.507.36a.8.8%200%200%201%20.217.686c-.049.267-.229.452-.39.574a2.8%202.8%200%200%201-.637.336c-.986.391-2.888.774-5.923%201.154c-2.147.269-3.44.53-4.106.767l-.02.007q.13.046.304.096c.34.096.769.19%201.27.278c1.002.176%202.259.326%203.59.44c1.004.086%202.078.222%202.99.395c.37.07.718.147%201.027.23l-.83.83a17%2017%200%200%200-.383-.078a30%2030%200%200%200-2.89-.38c-1.347-.116-2.636-.27-3.677-.452c-.52-.092-.986-.192-1.37-.301c-.372-.105-.713-.231-.95-.392a.94.94%200%200%201-.342-.385a.68.68%200%200%201%20.044-.642c.1-.163.25-.276.386-.356q.217-.127.516-.232c.778-.276%202.17-.549%204.317-.817c3.044-.382%204.826-.753%205.678-1.091q.158-.063.257-.116l-.036-.019c-.574-.29-1.8-.588-3.484-.866c-1.658-.274-3.694-.517-5.834-.72l-3.039-.272a.5.5%200%200%201-.453-.543m10.437%208.484c-.27.27-.415.617-.436.97q-.68.098-1.517.194c-2.13.244-3.445.555-4.189.879c-.374.162-.555.307-.634.406c-.06.075-.052.107-.044.137c.017.063.082.18.257.34c.17.155.405.319.696.483c.58.328%201.32.628%202.026.86l2.64.814a.5.5%200%200%201-.296.956l-2.65-.818c-.746-.244-1.554-.569-2.212-.941a5%205%200%200%201-.88-.616c-.238-.219-.458-.49-.546-.816a1.13%201.13%200%200%201%20.227-1.023c.225-.282.577-.508%201.018-.7c.884-.384%202.321-.708%204.473-.954a42%2042%200%200%200%202.198-.301zm3.415-1.293a.5.5%200%200%200-.708%200l-2%202a.5.5%200%200%200%20.708.708L16%2011.707v5.586l-1.146-1.147a.5.5%200%200%200-.708.708l2%202a.5.5%200%200%200%20.708%200l2-2a.5.5%200%200%200-.708-.708L17%2017.293v-5.586l1.146%201.147a.5.5%200%200%200%20.708-.708z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M3.002%202.955a.5.5%200%200%201%20.543-.453l3.042.272c2.153.205%204.214.45%205.904.73c1.665.274%203.04.59%203.772.96c.186.094.37.21.507.36a.8.8%200%200%201%20.217.686c-.049.267-.229.452-.39.574a2.8%202.8%200%200%201-.637.336c-.986.391-2.888.774-5.923%201.154c-2.147.269-3.44.53-4.106.767l-.02.007q.13.046.304.096c.34.096.769.19%201.27.278c1.002.176%202.259.326%203.59.44c1.004.086%202.078.222%202.99.395c.37.07.718.147%201.027.23l-.83.83a17%2017%200%200%200-.383-.078a30%2030%200%200%200-2.89-.38c-1.347-.116-2.636-.27-3.677-.452c-.52-.092-.986-.192-1.37-.301c-.372-.105-.713-.231-.95-.392a.94.94%200%200%201-.342-.385a.68.68%200%200%201%20.044-.642c.1-.163.25-.276.386-.356q.217-.127.516-.232c.778-.276%202.17-.549%204.317-.817c3.044-.382%204.826-.753%205.678-1.091q.158-.063.257-.116l-.036-.019c-.574-.29-1.8-.588-3.484-.866c-1.658-.274-3.694-.517-5.834-.72l-3.039-.272a.5.5%200%200%201-.453-.543m10.437%208.484c-.27.27-.415.617-.436.97q-.68.098-1.517.194c-2.13.244-3.445.555-4.189.879c-.374.162-.555.307-.634.406c-.06.075-.052.107-.044.137c.017.063.082.18.257.34c.17.155.405.319.696.483c.58.328%201.32.628%202.026.86l2.64.814a.5.5%200%200%201-.296.956l-2.65-.818c-.746-.244-1.554-.569-2.212-.941a5%205%200%200%201-.88-.616c-.238-.219-.458-.49-.546-.816a1.13%201.13%200%200%201%20.227-1.023c.225-.282.577-.508%201.018-.7c.884-.384%202.321-.708%204.473-.954a42%2042%200%200%200%202.198-.301zm3.415-1.293a.5.5%200%200%200-.708%200l-2%202a.5.5%200%200%200%20.708.708L16%2011.707v5.586l-1.146-1.147a.5.5%200%200%200-.708.708l2%202a.5.5%200%200%200%20.708%200l2-2a.5.5%200%200%200-.708-.708L17%2017.293v-5.586l1.146%201.147a.5.5%200%200%200%20.708-.708z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/ink-stroke-arrow-up-down-20-regular.svg?color=%231a73e8&size=48
