cursor.svg
CSS Cursor
1 Sept 2026
Version - last 1.0.0 from 1 Sept 2026
general
3
Name:auto
Description:Lets the browser automatically determine the most appropriate cursor based on the element, its state, and the current interaction context.
css:cursor:auto;
Name:default
Description:Displays the platform's default cursor. It is usually rendered as a standard arrow and does not adapt automatically to the semantic meaning of the element.
css:cursor:default;
Name:none
Description:Hides the visual cursor while the pointer remains active and can still interact with elements.
css:cursor:none;
links-status
5
Name:context-menu
Description:Indicates that a context menu is available for the element. The exact appearance depends on the operating system and browser.
css:cursor:context-menu;
Name:help
Description:Indicates that additional help, documentation, or explanatory information is available for the current element or area.
css:cursor:help;
Name:pointer
Description:Indicates that the element can be activated by clicking or tapping. It is commonly displayed as a hand with an extended index finger and is traditionally used for links and other clickable controls.
css:cursor:pointer;
Name:progress
Description:Indicates that an operation is currently running, but the user can still interact with the interface. Unlike wait, it does not imply that the application is completely blocked.
css:cursor:progress;
Name:wait
Description:Indicates that the application or current operation is busy and the user should wait before continuing interaction.
css:cursor:wait;
selection
4
Name:cell
Description:Indicates that a table cell, spreadsheet cell, or similar grid-based item can be selected.
css:cursor:cell;
Name:crosshair
Description:Displays a crosshair cursor intended for precise positioning, coordinate selection, drawing, region selection, graphics editors, canvases, and similar precision-oriented interactions.
css:cursor:crosshair;
Name:text
Description:Indicates that horizontal text can be selected. It is typically displayed as a vertical I-beam cursor.
css:cursor:text;
Name:vertical-text
Description:Indicates that vertically oriented text can be selected. It is typically displayed as a horizontal I-beam cursor.
css:cursor:vertical-text;
drag-drop
7
Name:alias
Description:Indicates that a drag-and-drop operation will create an alias, shortcut, link, or reference to the dragged object rather than moving or copying the original object directly.
css:cursor:alias;
Name:copy
Description:Indicates that the dragged object will be copied to the destination while the original object remains in its current location.
css:cursor:copy;
Name:move
Description:Indicates that an element or object can be moved, typically through drag-and-drop interaction.
css:cursor:move;
Name:no-drop
Description:Indicates that the currently dragged object cannot be dropped at the current location.
css:cursor:no-drop;
Name:not-allowed
Description:Indicates that the requested action is prohibited or unavailable in the current context or state.
css:cursor:not-allowed;
Name:grab
Description:Indicates that an object can be grabbed and dragged. It is commonly represented as an open hand.
css:cursor:grab;
Name:grabbing
Description:Indicates that an object is currently being grabbed or dragged. It is commonly represented as a closed hand.
css:cursor:grabbing;
resize-scroll
15
Name:all-scroll
Description:Indicates that the content or object can be moved or scrolled in multiple directions, commonly used for panning maps, canvases, editors, and large workspaces.
css:cursor:all-scroll;
Name:col-resize
Description:Indicates that the width of a column or similar element can be resized horizontally.
css:cursor:col-resize;
Name:row-resize
Description:Indicates that the height of a row or similar element can be resized vertically.
css:cursor:row-resize;
Name:n-resize
Description:Indicates that an element can be resized by moving its top or north edge.
css:cursor:n-resize;
Name:e-resize
Description:Indicates that an element can be resized by moving its right or east edge.
css:cursor:e-resize;
Name:s-resize
Description:Indicates that an element can be resized by moving its bottom or south edge.
css:cursor:s-resize;
Name:w-resize
Description:Indicates that an element can be resized by moving its left or west edge.
css:cursor:w-resize;
Name:ne-resize
Description:Indicates diagonal resizing from the top-right or north-east corner of an element, affecting both width and height.
css:cursor:ne-resize;
Name:nw-resize
Description:Indicates diagonal resizing from the top-left or north-west corner of an element, affecting both width and height.
css:cursor:nw-resize;
Name:se-resize
Description:Indicates diagonal resizing from the bottom-right or south-east corner of an element, affecting both width and height.
css:cursor:se-resize;
Name:sw-resize
Description:Indicates diagonal resizing from the bottom-left or south-west corner of an element, affecting both width and height.
css:cursor:sw-resize;
Name:ew-resize
Description:Indicates bidirectional horizontal resizing along the east-west axis, allowing an edge or divider to move left or right.
css:cursor:ew-resize;
Name:ns-resize
Description:Indicates bidirectional vertical resizing along the north-south axis, allowing an edge or divider to move upward or downward.
css:cursor:ns-resize;
Name:nesw-resize
Description:Indicates bidirectional diagonal resizing along the north-east to south-west axis.
css:cursor:nesw-resize;
Name:nwse-resize
Description:Indicates bidirectional diagonal resizing along the north-west to south-east axis.
css:cursor:nwse-resize;
zoom
2
Name:zoom-in
Description:Indicates that the user can increase the zoom level or magnify the current content. It is commonly displayed as a magnifying glass with a plus symbol.
css:cursor:zoom-in;
Name:zoom-out
Description:Indicates that the user can decrease the zoom level or reduce the magnification of the current content. It is commonly displayed as a magnifying glass with a minus symbol.
css:cursor:zoom-out;
Feedback