The Phosphor cards icon depicts a stack of rectangular cards, commonly used to represent content modules, user profiles, or distinct sections within an interface.
Common uses
- Displaying product listings
- Showing user testimonials
- Representing different sections of a dashboard
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Cards } from '@phosphor-icons/react';
<Cards size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Cards size={24} />thin
<Cards size={24} weight="thin" />light
<Cards size={24} weight="light" />bold
<Cards size={24} weight="bold" />fill
<Cards size={24} weight="fill" />duotone
<Cards size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- cardslidesslideshowwindowswebsitewebpagelayersdesignsystemcardscard stack
FAQ
- What is the Phosphor cards icon used for?
- It's used to visually represent stacked or layered content elements like cards, profiles, or sections in a UI.
- How do I use the cards icon in React?
- You can import and use it in React with: import { Cards } from '@phosphor-icons/react'.
- What is the license for Phosphor icons?
- Phosphor icons are distributed under the MIT license, allowing for free usage.
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 →