Contact Card Group icon

Use the Contact Card Group 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 { ContactCardGroup24Regular, ContactCardGroup24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M18.75 4C20.5449 4 22 5.45507 22 7.25V16.7546C22 18.5495 20.5449 20.0046 18.75 20.0046H5.25C3.45507 20.0046 2 18.5495 2 16.7546V7.25C2 5.51697 3.35645 4.10075 5.06558 4.00514L5.25 4H18.75ZM18.75 5.5H5.25L5.10647 5.5058C4.20711 5.57881 3.5 6.33183 3.5 7.25V16.7546C3.5 17.7211 4.2835 18.5046 5.25 18.5046H18.75C19.7165 18.5046 20.5 17.7211 20.5 16.7546V7.25C20.5 6.2835 19.7165 5.5 18.75 5.5ZM9.25257 12.5C9.66678 12.5 10.0026 12.8358 10.0026 13.25V13.8322C10.0026 15.1042 9.0341 15.75 7.50129 15.75C5.96841 15.75 5 15.1036 5 13.831V13.25C5 12.8358 5.33579 12.5 5.75 12.5H9.25257ZM10.8335 12.4986L12.25 12.5C12.6642 12.5 13 12.8358 13 13.25V13.5827C13 14.5462 12.235 15 11.125 15C11.0089 15 10.8965 14.995 10.7884 14.985C10.9004 14.7161 10.9703 14.4161 10.9937 14.0857L11.0026 13.8322V13.25C11.0026 12.981 10.9419 12.7263 10.8335 12.4986ZM15.2497 12.5H18.25C18.6642 12.5 19 12.8358 19 13.25C19 13.6297 18.7178 13.9435 18.3518 13.9932L18.25 14H15.2497C14.8355 14 14.4997 13.6642 14.4997 13.25C14.4997 12.8703 14.7818 12.5565 15.1479 12.5068L15.2497 12.5H18.25H15.2497ZM7.50071 8.5C8.32953 8.5 9.00143 9.17189 9.00143 10.0007C9.00143 10.8295 8.32953 11.5014 7.50071 11.5014C6.67189 11.5014 6 10.8295 6 10.0007C6 9.17189 6.67189 8.5 7.50071 8.5ZM11.37 9.00225C12.0591 9.00225 12.6177 9.56089 12.6177 10.25C12.6177 10.9391 12.0591 11.4977 11.37 11.4977C10.6809 11.4977 10.1222 10.9391 10.1222 10.25C10.1222 9.56089 10.6809 9.00225 11.37 9.00225ZM15.2497 9.5H18.25C18.6642 9.5 19 9.83579 19 10.25C19 10.6297 18.7178 10.9435 18.3518 10.9932L18.25 11H15.2497C14.8355 11 14.4997 10.6642 14.4997 10.25C14.4997 9.8703 14.7818 9.55651 15.1479 9.50685L15.2497 9.5H18.25H15.2497Z" 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_group_24_regular.svg";

Details

Keywords

personprofiledetailsorganizationpeoplecard