Contact Card Generic icon

Use the Contact Card Generic 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 { ContactCardGeneric24Regular, ContactCardGeneric24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_contact_card_generic_24_regular.svg" width="24" height="24" alt="Contact Card Generic">

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="M19.75 4C20.9926 4 22 5.00736 22 6.25V17.75C22 18.9926 20.9926 20 19.75 20H4.25C3.00736 20 2 18.9926 2 17.75V6.25C2 5.00736 3.00736 4 4.25 4H19.75ZM4.25 5.5C3.83579 5.5 3.5 5.83579 3.5 6.25V17.75C3.5 18.1642 3.83579 18.5 4.25 18.5H19.75C20.1642 18.5 20.5 18.1642 20.5 17.75V6.25C20.5 5.83579 20.1642 5.5 19.75 5.5H4.25ZM8 9C9.65685 9 11 10.3431 11 12C11 13.6569 9.65685 15 8 15C6.34315 15 5 13.6569 5 12C5 10.3431 6.34315 9 8 9ZM17.75 13C18.1642 13 18.5 13.3358 18.5 13.75C18.5 14.1642 18.1642 14.5 17.75 14.5H13.25C12.8358 14.5 12.5 14.1642 12.5 13.75C12.5 13.3358 12.8358 13 13.25 13H17.75ZM8 10.5C7.17157 10.5 6.5 11.1716 6.5 12C6.5 12.8284 7.17157 13.5 8 13.5C8.82843 13.5 9.5 12.8284 9.5 12C9.5 11.1716 8.82843 10.5 8 10.5ZM17.75 9.5C18.1642 9.5 18.5 9.83579 18.5 10.25C18.5 10.6642 18.1642 11 17.75 11H13.25C12.8358 11 12.5 10.6642 12.5 10.25C12.5 9.83579 12.8358 9.5 13.25 9.5H17.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/contact_card_generic_24_regular.svg";

Details

Keywords

personprofiledetailsorganizationpeoplecard