The Phosphor device rotate icon visually represents changing the orientation of a device, commonly used to indicate rotation controls or screen orientation settings.
Common uses
- Button to toggle screen orientation
- Setting for preferred device orientation
- Visual cue for rotating content
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { DeviceRotate } from '@phosphor-icons/react';
<DeviceRotate size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<DeviceRotate size={24} />thin
<DeviceRotate size={24} weight="thin" />light
<DeviceRotate size={24} weight="light" />bold
<DeviceRotate size={24} weight="bold" />fill
<DeviceRotate size={24} weight="fill" />duotone
<DeviceRotate size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- objects
- Keywords
- *new*orientationlandscapeportraitspinflipobjectssystemdevicerotatescreen rotationorientation lockdevice orientationrotate screen
FAQ
- What does the device rotate icon signify?
- It signifies the action or setting related to rotating a device's screen between landscape and portrait modes.
- How do I use the device rotate icon in React?
- You can import and use it like this: import { DeviceRotate } from '@phosphor-icons/react'. Then render it as a React component: <DeviceRotate />.
- What is the license for the Phosphor device rotate icon?
- The Phosphor icon library, including the device rotate icon, is available under the MIT license.
Related icons
The same idea in other libraries, and near matches in Phosphor.
Looking for something else? Search Phosphor and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →