Skip to content

Panel Right

The panel-right icon represents right-aligned panels, properties sidebars, and right interface sections in application layouts and design systems.

Exports at 24 × 24 px

Panel Right icon from Akar Icons
Get Pro

Code

Panel Right in your framework

In any framework. Customize it above, and the code follows.

export const PanelRightIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <g fill="none" stroke="currentColor" strokeWidth="2"><rect width="20" height="18" x="2" y="3" strokeLinecap="round" strokeLinejoin="round" rx="2"/><path d="M15 3v18"/></g>
  </svg>
);

Other libraries

Panel Right in 5 more libraries

Each library draws it its own way. Open one to compare.

  • Panel Right icon from Myna UI Icons
  • Panel Right icon from Lucide
  • Panel Right icon from ProIcons
  • Panel Right icon from System UIcons
  • Panel Right icon from Radix Icons

Akar Icons

Icons that share its tags, in the same style.

  • Sidebar Right icon from Akar Icons
  • Panel Left icon from Akar Icons
  • Sidebar Left icon from Akar Icons
  • Panel Bottom icon from Akar Icons
  • Align Right icon from Akar Icons
  • Arrow Right icon from Akar Icons
  • Panel Split icon from Akar Icons
  • Panel Top icon from Akar Icons
  • Text Align Right icon from Akar Icons
  • Triangle Right icon from Akar Icons
  • Align Bottom icon from Akar Icons
  • Align Horizontal Center icon from Akar Icons
  • Align Left icon from Akar Icons
  • Align Top icon from Akar Icons
  • Arrow Right Thick icon from Akar Icons
  • Chevron Right icon from Akar Icons
  • Chevron Right Small icon from Akar Icons
  • Circle Chevron Right icon from Akar Icons
  • Circle Triangle Right icon from Akar Icons
  • Dashboard icon from Akar Icons
  • Dot Grid icon from Akar Icons
  • Fork Right icon from Akar Icons
  • Frame icon from Akar Icons
  • Grid icon from Akar Icons

Skip the copy and paste. With Pro, your AI agent finds and installs any Akar Icons icon from a prompt.

Get Pro

Pricing

Akar Icons MCP, with Pro

Ask for Panel Right or any of 458 Akar Icons icons and your agent installs it. The MCP comes with every Pro plan, with 6,000+ blocks and 14 premium templates. The icons stay free.

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

  • How many people can use the license.Seats: 1 seat
  • Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
  • Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.Blocks: All 6,181 blocks
  • Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.Templates: All 14 templates
  • Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.MCP server: 38 AI clients
  • Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.Animated buttons: All 35 buttons
  • Typewriters, scrambles, counters and more, for headlines, labels and numbers.Text effects: All 97 effects
  • Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.Backgrounds: All 100 backgrounds
  • WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.Shaders: All 100 shaders
  • One design and one theme on all four: the components, blocks and effects are built for each framework.Frameworks: React, Vue, Svelte, Solid
  • React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.UI libraries: Base UI, Radix, Aria, Ark
  • From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.Components: All 174 components
  • Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.Examples: All 1,103 examples
  • Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.Charts: All 70 charts
  • Debounce, local storage, media queries and more: each hook is one typed file you own.React hooks: All 35 hooks
  • From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.Icons: 294k+ icons
  • Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.DESIGN.md files: All 500 brands
  • Restyle every component and block at once: 8 styles, 7 grays, 18 colors and 5 radii, shared as a shadcn preset code.Theme builder: 8 styles × 18 colors
  • Priority requests are answered first.Support: Standard

Team

Most popular

For freelancers, agencies & startups

$66instead of $99/mo

$789 billed yearly · ≈ $13/dev/mo

Everything in Individual, plus

  • How many people can use the license.Seats: Up to 5 seats
  • Client work, SaaS products and anything you charge for.Commercial use: Included
  • Priority requests are answered first.Support: Priority

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

  • How many people can use the license.Seats: Unlimited seats
  • Secure checkout via Stripe
  • Code lives in your repo
  • Keep what you've shipped if you cancel
  • License terms

FAQ

Frequently asked questions

What the Panel Right icon means and where it's used, then how to install, style, label and license it.

What does the Panel Right icon mean?

The panel-right icon represents right-aligned panels, properties sidebars, and right interface sections in application layouts and design systems. Featuring a panel or container positioned on the right side, this icon is commonly used to indicate properties panel controls, right sidebar toggles, inspector visibility, and right-anchored interface elements in IDEs, design tools, and web applications.

Where is the Panel Right icon used?

In modern applications like Figma's right properties inspector, Notion's page information sidebar, or VS Code's outline panel, you'll see this panel-right icon representing right interface sections. It appears in design tools when showing or hiding properties inspectors, in content editors when toggling metadata sidebars, or in development environments when controlling right-side documentation and symbol panels.

What does the Panel Right icon tell users?

From a layout organization perspective, the right panel symbol communicates more than just 'side section' - it specifically indicates contextual properties areas, the conventional location for item-specific details and settings, and the design pattern of placing secondary information and object properties in accessible right positions. This spatial convention helps users locate contextual tools and detailed information following established interface patterns.

Which library is the Panel Right icon from?

Panel Right is one of 458 icons in Akar Icons, made by Arturo Wibawa and released under MIT. It is drawn on a 24 × 24 grid with a 2 stroke.

4.9 out of 5 from 150+ developers

Install Panel Right from a prompt

MCP, 6,000+ blocks and 14 premium templates in every Pro plan. The icons stay free.

Get Pro
  • Cancel anytime
  • Keep what you've shipped