Card UI Portrait Flip icon

Use the Card UI Portrait Flip 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 { CardUiPortraitFlip24Regular, CardUiPortraitFlip24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CardUiPortraitFlip24Regular aria-label="Card UI Portrait Flip" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_card_ui_portrait_flip_24_regular.svg" width="24" height="24" alt="Card UI Portrait Flip">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 4.75C4 3.23122 5.23122 2 6.75 2H17.25C18.7688 2 20 3.23122 20 4.75V10H19.25C18.9816 10 18.7273 10.0604 18.5 10.1684V4.75C18.5 4.05964 17.9404 3.5 17.25 3.5H6.75C6.05964 3.5 5.5 4.05964 5.5 4.75V10.1684C5.27269 10.0604 5.0184 10 4.75 10H4V4.75ZM18.5 16.7692C19.0453 16.5395 19.5447 16.2889 20 16.0278V19.25C20 20.7688 18.7688 22 17.25 22H6.75C5.23122 22 4 20.7688 4 19.25V16.0278C4.45533 16.2889 4.95471 16.5395 5.5 16.7692V19.25C5.5 19.9404 6.05964 20.5 6.75 20.5H17.25C17.9404 20.5 18.5 19.9404 18.5 19.25V16.7692ZM1.75 11C1.33579 11 1 11.3358 1 11.75V14.75C1 15.1642 1.33579 15.5 1.75 15.5C2.16421 15.5 2.5 15.1642 2.5 14.75V13.7188C2.81811 14.0061 3.1952 14.3118 3.63559 14.6166C5.37884 15.8235 8.08894 17 12 17C15.9111 17 18.6212 15.8235 20.3644 14.6166C20.8048 14.3118 21.1819 14.0061 21.5 13.7188V14.75C21.5 15.1642 21.8358 15.5 22.25 15.5C22.6642 15.5 23 15.1642 23 14.75V11.75C23 11.3358 22.6642 11 22.25 11H19.25C18.8358 11 18.5 11.3358 18.5 11.75C18.5 12.1642 18.8358 12.5 19.25 12.5H20.6095C20.3145 12.7759 19.9501 13.0791 19.5106 13.3834C18.0038 14.4265 15.5889 15.5 12 15.5C8.41106 15.5 5.99616 14.4265 4.48941 13.3834C4.04991 13.0791 3.68553 12.7759 3.3905 12.5H4.75C5.16421 12.5 5.5 12.1642 5.5 11.75C5.5 11.3358 5.16421 11 4.75 11H1.75ZM8 6.75C8 6.33579 8.33579 6 8.75 6H15.25C15.6642 6 16 6.33579 16 6.75C16 7.16421 15.6642 7.5 15.25 7.5H8.75C8.33579 7.5 8 7.16421 8 6.75ZM8.75 10C8.33579 10 8 10.3358 8 10.75C8 11.1642 8.33579 11.5 8.75 11.5H13.25C13.6642 11.5 14 11.1642 14 10.75C14 10.3358 13.6642 10 13.25 10H8.75Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/card_ui_portrait_flip_24_regular.svg";

Details

Keywords

carduidetailsinfofliprotatefrontback