Playing Cards icon
Used to represent fun card games. The Playing Cards icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles on a 20 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Every size and style
Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.
Regular, 20 px
ic_fluent_playing_cards_20_regular.svg
Playing Cards icon in React
npm install @fluentui/react-icons
import { PlayingCards20Regular } from "@fluentui/react-icons";
export function Example() {
return <PlayingCards20Regular aria-label="Playing Cards" />;
}Use the Playing Cards 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 { PlayingCards20Regular, PlayingCards20Filled } from "@fluentui/react-icons";
export function Example() {
return <PlayingCards20Regular aria-label="Playing Cards" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_playing_cards_20_regular.svg" width="20" height="20" alt="Playing Cards"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M5.07 13a2 2 0 0 0 1.41 2.46l5.46 1.47a2 2 0 0 0 2.45-1.41L16.93 6a2 2 0 0 0-1.41-2.46l-5.46-1.47A2 2 0 0 0 7.6 3.5zm1.67 1.5a1 1 0 0 1-.7-1.23l2.53-9.52a1 1 0 0 1 1.23-.71l5.46 1.47a1 1 0 0 1 .7 1.23l-2.53 9.52a1 1 0 0 1-1.23.7zM4 10.47 2.67 5.51a2 2 0 0 1 1.41-2.45l.08-.02A3 3 0 0 0 4 4v.19a1 1 0 0 0-.36 1.06L4 6.6zm1-1.09V4c0-1.1.9-2 2-2h.1a3 3 0 0 0-.33.74l-.08.31A1 1 0 0 0 6 4v1.64zM13 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/></svg>Details
| Name | Playing Cards |
|---|---|
| Styles | Regular (outlined), Filled |
| Sizes | 20 px |
| Regular (outlined) file | ic_fluent_playing_cards_20_regular.svg |
| Filled file | ic_fluent_playing_cards_20_filled.svg |
| React (Regular) | PlayingCards20Regular |
| React (Filled) | PlayingCards20Filled |
| License | MIT (© Microsoft Corporation) |