Drag icon (Filled & Regular)

Used to represent cursor moving. Old metaphor, suggest using Arrow Move. The Drag 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 Drag 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 { Drag24Regular, Drag24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Drag24Regular aria-label="Drag" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_drag_24_regular.svg" width="24" height="24" alt="Drag">

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="M12.0006 16.4998C12.3803 16.4998 12.6941 16.782 12.7437 17.148L12.7506 17.2498V19.4378L13.4703 18.7195C13.7365 18.4532 14.1532 18.429 14.4468 18.6469L14.5309 18.7195C14.7972 18.9857 14.8214 19.4024 14.6035 19.696L14.5309 19.7801L12.5309 21.7801L12.4928 21.8157L12.4206 21.8713L12.3258 21.9259L12.2392 21.961L12.1369 21.9874L12.052 21.9981H11.949L11.8292 21.9801L11.7613 21.9608L11.7024 21.9382L11.6315 21.9029L11.5803 21.871L11.549 21.8486C11.5212 21.8276 11.4949 21.8047 11.4703 21.7801L9.47025 19.7801C9.17736 19.4872 9.17736 19.0124 9.47025 18.7195C9.73652 18.4532 10.1532 18.429 10.4468 18.6469L10.5309 18.7195L11.2506 19.4388V17.2498C11.2506 16.8701 11.5327 16.5563 11.8988 16.5066L12.0006 16.4998ZM12.0006 8.9998C13.6574 8.9998 15.0006 10.3429 15.0006 11.9998C15.0006 13.6567 13.6574 14.9998 12.0006 14.9998C10.3437 14.9998 9.00058 13.6567 9.00058 11.9998C9.00058 10.3429 10.3437 8.9998 12.0006 8.9998ZM18.7203 9.46947C18.9865 9.20321 19.4032 9.179 19.6968 9.39685L19.7809 9.46947L21.7809 11.4695L21.8165 11.5076L21.8721 11.5798L21.9267 11.6746L21.9618 11.7611L21.9882 11.8635L21.9988 11.9484V12.0512L21.9808 12.1712L21.9616 12.2391L21.939 12.2979L21.9037 12.3688L21.8718 12.4201L21.8443 12.4581L21.7809 12.5301L19.7809 14.5301C19.488 14.823 19.0131 14.823 18.7203 14.5301C18.454 14.2639 18.4298 13.8472 18.6476 13.5536L18.7203 13.4695L19.4386 12.7498H17.2506C16.8709 12.7498 16.5571 12.4676 16.5074 12.1016L16.5006 11.9998C16.5006 11.6201 16.7827 11.3063 17.1488 11.2566L17.2506 11.2498H19.4396L18.7203 10.5301C18.454 10.2639 18.4298 9.8472 18.6476 9.55359L18.7203 9.46947ZM4.22025 9.46947C4.51315 9.17658 4.98802 9.17658 5.28091 9.46947C5.54718 9.73574 5.57139 10.1524 5.35353 10.446L5.28091 10.5301L4.56058 11.2498H6.75058C7.13028 11.2498 7.44407 11.532 7.49374 11.898L7.50058 11.9998C7.50058 12.3795 7.21843 12.6933 6.85235 12.743L6.75058 12.7498H4.56158L5.28091 13.4695C5.54718 13.7357 5.57139 14.1524 5.35353 14.446L5.28091 14.5301C5.01465 14.7964 4.59798 14.8206 4.30437 14.6028L4.22025 14.5301L2.22025 12.5301L2.12908 12.4199L2.07451 12.325L2.0394 12.2385L2.013 12.1361L2.00195 12.0452L2.00205 11.9527L2.02032 11.8284L2.03956 11.7605L2.06219 11.7017L2.09744 11.6308L2.12935 11.5795L2.15175 11.5482C2.17275 11.5204 2.19565 11.4941 2.22025 11.4695L4.22025 9.46947ZM12.0006 10.4998C11.1722 10.4998 10.5006 11.1714 10.5006 11.9998C10.5006 12.8282 11.1722 13.4998 12.0006 13.4998C12.829 13.4998 13.5006 12.8282 13.5006 11.9998C13.5006 11.1714 12.829 10.4998 12.0006 10.4998ZM11.8643 2.01222L11.9312 2.00297L12.018 2L12.078 2.00378L12.172 2.01954L12.2399 2.03878L12.2987 2.0614L12.3696 2.09666L12.4209 2.12857L12.4589 2.15607L12.5309 2.21947L14.5309 4.21947C14.8238 4.51237 14.8238 4.98724 14.5309 5.28013C14.2646 5.5464 13.848 5.57061 13.5544 5.35275L13.4703 5.28013L12.7506 4.5608V6.7498C12.7506 7.1295 12.4684 7.44329 12.1024 7.49296L12.0006 7.4998C11.6209 7.4998 11.3071 7.21765 11.2574 6.85157L11.2506 6.7498V4.5598L10.5309 5.28013C10.2646 5.5464 9.84798 5.57061 9.55437 5.35275L9.47025 5.28013C9.20399 5.01387 9.17978 4.5972 9.39764 4.30359L9.47025 4.21947L11.4703 2.21947L11.5805 2.1283L11.6754 2.07373L11.7619 2.03862L11.8643 2.01222Z" 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/drag_24_regular.svg";

Details

Name	Drag
Styles	Regular (outlined), Filled
Size	24 × 24 px (scalable SVG)
Regular (outlined) file	`ic_fluent_drag_24_regular.svg`
Filled file	`ic_fluent_drag_24_filled.svg`
React components	`Drag24Regular, Drag24Filled`
License	MIT (© Microsoft Corporation)

Keywords

point direction position

Drag icon

Use the Drag icon in React

Use it in HTML

Use it from the SVG package

Details

Keywords

Related icons