Person Board Add icon

Use the Person Board Add 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 { PersonBoardAdd24Regular, PersonBoardAdd24Filled } from "@fluentui/react-icons";

export function Example() {
  return <PersonBoardAdd24Regular aria-label="Person Board Add" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_person_board_add_24_regular.svg" width="24" height="24" alt="Person Board Add">

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="M10.5 15.75C10.7587 15.75 11.0067 15.7431 11.2441 15.7293C11.4005 15.1757 11.6283 14.6522 11.9171 14.1692C11.5246 14.2231 11.056 14.25 10.5 14.25C9.48116 14.25 8.6537 14.1102 8.08981 13.8173C7.81113 13.6725 7.60366 13.4939 7.46536 13.2822C7.43323 13.2331 7.40434 13.1951 7.37894 13.1617C7.29577 13.0522 7.25 12.992 7.25 12.75V12.25C7.25 12.1119 7.36193 12 7.5 12H13.5C13.619 12 13.7186 12.0832 13.7438 12.1945C14.1525 11.9046 14.5962 11.6608 15.0673 11.4706C14.7806 10.8952 14.1865 10.5 13.5 10.5H7.5C6.5335 10.5 5.75 11.2835 5.75 12.25V12.75C5.75 13.8289 6.26536 14.4053 7.12603 14.9505C7.97516 15.4884 9.15255 15.75 10.5 15.75ZM6.25 16.5H11.0764C11.0261 16.826 11 17.1599 11 17.5C11 17.6682 11.0064 17.835 11.0189 18H6.25C4.45507 18 3 16.5449 3 14.75V6.25C3 4.45507 4.45507 3 6.25 3H14.75C16.5449 3 18 4.45507 18 6.25V11.0189C17.835 11.0064 17.6682 11 17.5 11C17.1599 11 16.826 11.0261 16.5 11.0764V6.25C16.5 5.2835 15.7165 4.5 14.75 4.5H6.25C5.2835 4.5 4.5 5.2835 4.5 6.25V14.75C4.5 15.7165 5.2835 16.5 6.25 16.5ZM6.01089 19H11.1739C11.2986 19.5277 11.4876 20.0306 11.7322 20.5H8.74999C7.59938 20.5 6.58843 19.902 6.01089 19ZM20.5 8.74996V11.7322C20.0307 11.4876 19.5278 11.2986 19 11.1739V6.01086C19.9021 6.5884 20.5 7.59935 20.5 8.74996ZM13 7.5C13 8.88071 11.8807 10 10.5 10C9.11929 10 8 8.88071 8 7.5C8 6.11929 9.11929 5 10.5 5C11.8807 5 13 6.11929 13 7.5ZM11.5 7.5C11.5 6.94772 11.0523 6.5 10.5 6.5C9.94772 6.5 9.5 6.94772 9.5 7.5C9.5 8.05228 9.94772 8.5 10.5 8.5C11.0523 8.5 11.5 8.05228 11.5 7.5ZM23 17.5C23 14.4624 20.5376 12 17.5 12C14.4624 12 12 14.4624 12 17.5C12 20.5376 14.4624 23 17.5 23C20.5376 23 23 20.5376 23 17.5ZM18.0006 18L18.0011 20.5035C18.0011 20.7797 17.7773 21.0035 17.5011 21.0035C17.225 21.0035 17.0011 20.7797 17.0011 20.5035L17.0006 18H14.4956C14.2197 18 13.9961 17.7762 13.9961 17.5C13.9961 17.2239 14.2197 17 14.4956 17H17.0005L17 14.4993C17 14.2231 17.2239 13.9993 17.5 13.9993C17.7761 13.9993 18 14.2231 18 14.4993L18.0005 17H20.4966C20.7725 17 20.9961 17.2239 20.9961 17.5C20.9961 17.7762 20.7725 18 20.4966 18H18.0006Z" 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/person_board_add_24_regular.svg";

Details

Keywords

humanpatientcontactguestcardpeoplecardinformation