Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:

VS Code Icons · VscSortPrecedence

Sort Precedence icon

A free sort precedence icon from VS Code Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

Also known asfilter icon funnel icon refine icon sliders icon

License: CC BY 4.0 license
Project: github.com

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/vscode-codicons/sort-precedence.json

components/icons/vscode-codicons-sort-precedence.tsx

import * as React from "react";

/**
 * Sort Precedence from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/sort-precedence. Sized in em, colored by currentColor.
 */
export function VscSortPrecedenceIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 16 16"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M4.0008 1.5C4.0008 1.224 3.7768 1 3.5008 1C3.2248 1 2.9998 1.224 2.9998 1.5V13.293L1.8538 12.147C1.6588 11.952 1.3418 11.952 1.1468 12.147C0.951799 12.342 0.951799 12.659 1.1468 12.854L3.1468 14.854C3.3418 15.049 3.6588 15.049 3.8538 14.854L5.8538 12.854C6.0488 12.659 6.0488 12.342 5.8538 12.147C5.6588 11.952 5.3418 11.952 5.1468 12.147L4.0008 13.293V1.5Z"
      />
      <path
        d="M13.9998 2H6.99982C6.44982 2 5.99982 2.45 5.99982 3V5H6.99982V3H13.9998V8H12.9998V9H13.9998C14.5498 9 14.9998 8.55 14.9998 8V3C14.9998 2.45 14.5498 2 13.9998 2Z"
      />
      <path
        d="M10.9998 6H5.00079V7H10.9998V12H6.90879C6.96479 12.159 6.99979 12.327 6.99979 12.501C6.99979 12.674 6.96479 12.841 6.90879 13H10.9998C11.5518 13 11.9998 12.552 11.9998 12V7C11.9998 6.448 11.5518 6 10.9998 6Z"
      />
      <path
        d="M9.99982 10C9.99982 10.5523 9.5521 11 8.99982 11C8.44753 11 7.99982 10.5523 7.99982 10C7.99982 9.44772 8.44753 9 8.99982 9C9.5521 9 9.99982 9.44772 9.99982 10Z"
      />
      <path
        d="M5.00079 8.995C5.00379 8.445 5.44879 8 5.99979 8C6.55179 8 6.99979 8.448 6.99979 9C6.99979 9.552 6.55079 10 5.99979 10C5.44879 10 5.00379 9.555 5.00079 9.005V8.995Z"
      />
      <path
        d="M8.99982 4C8.44982 4 7.99982 4.45 7.99982 5H9.99982C9.99982 4.45 9.54982 4 8.99982 4Z"
      />
    </svg>
  );
}

With react-icons

import { VscSortPrecedence } from "react-icons/vsc";

export function Example() {
  return <VscSortPrecedence className="size-5" />;
}

sort-precedence.svg

<svg
  viewBox="0 0 16 16"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M4.0008 1.5C4.0008 1.224 3.7768 1 3.5008 1C3.2248 1 2.9998 1.224 2.9998 1.5V13.293L1.8538 12.147C1.6588 11.952 1.3418 11.952 1.1468 12.147C0.951799 12.342 0.951799 12.659 1.1468 12.854L3.1468 14.854C3.3418 15.049 3.6588 15.049 3.8538 14.854L5.8538 12.854C6.0488 12.659 6.0488 12.342 5.8538 12.147C5.6588 11.952 5.3418 11.952 5.1468 12.147L4.0008 13.293V1.5Z"
  />
  <path
    d="M13.9998 2H6.99982C6.44982 2 5.99982 2.45 5.99982 3V5H6.99982V3H13.9998V8H12.9998V9H13.9998C14.5498 9 14.9998 8.55 14.9998 8V3C14.9998 2.45 14.5498 2 13.9998 2Z"
  />
  <path
    d="M10.9998 6H5.00079V7H10.9998V12H6.90879C6.96479 12.159 6.99979 12.327 6.99979 12.501C6.99979 12.674 6.96479 12.841 6.90879 13H10.9998C11.5518 13 11.9998 12.552 11.9998 12V7C11.9998 6.448 11.5518 6 10.9998 6Z"
  />
  <path
    d="M9.99982 10C9.99982 10.5523 9.5521 11 8.99982 11C8.44753 11 7.99982 10.5523 7.99982 10C7.99982 9.44772 8.44753 9 8.99982 9C9.5521 9 9.99982 9.44772 9.99982 10Z"
  />
  <path
    d="M5.00079 8.995C5.00379 8.445 5.44879 8 5.99979 8C6.55179 8 6.99979 8.448 6.99979 9C6.99979 9.552 6.55079 10 5.99979 10C5.44879 10 5.00379 9.555 5.00079 9.005V8.995Z"
  />
  <path
    d="M8.99982 4C8.44982 4 7.99982 4.45 7.99982 5H9.99982C9.99982 4.45 9.54982 4 8.99982 4Z"
  />
</svg>

Attribution

"Sort Precedence" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Related icons: filter, funnel, refine, sliders

Similar VS Code Icons icons