Contact Card icon

Microsoft uses it for directional indicators, links. The Contact Card icon is tagged people card, profile and details. Similar Fluent icons include Contact Card Generic, Contact Card Group and Contact Card Link.

Regular (outlined)

SVG

Filled

SVG
Contact Card Color

Color

SVG

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, 24 px

ic_fluent_contact_card_24_regular.svg

Contact Card icon in React

npm install @fluentui/react-icons

import { ContactCard24Regular } from "@fluentui/react-icons";

export function Example() {
  return <ContactCard24Regular aria-label="Contact Card" />;
}

Use the Contact Card icon in React

Import ContactCard24Regular and ContactCard24Filled from Microsoft's @fluentui/react-icons package; the code tabs above have this and other platforms. Coding agents can look the component up through the Fluent Icons MCP server.

Details

NameContact Card
StylesRegular (outlined), Filled, Color
Sizes16 px, 20 px, 24 px, 28 px, 32 px, 48 px
Regular (outlined) fileic_fluent_contact_card_24_regular.svg
Filled fileic_fluent_contact_card_24_filled.svg
Color fileic_fluent_contact_card_24_color.svg
React (Regular)ContactCard16Regular, ContactCard20Regular, ContactCard24Regular, ContactCard28Regular, ContactCard32Regular, ContactCard48Regular
React (Filled)ContactCard16Filled, ContactCard20Filled, ContactCard24Filled, ContactCard28Filled, ContactCard32Filled, ContactCard48Filled
React (Color)ContactCard16Color, ContactCard20Color, ContactCard24Color, ContactCard28Color, ContactCard32Color, ContactCard48Color
Font glyph (Regular, 24 px)U+F320 · &#xF320;
Font glyph (Filled, 24 px)U+F320 · &#xF320;
LicenseMIT (© Microsoft Corporation)

Keywords

personprofiledetailsorganization

Similar icons