Person Head Hint icon

Use the Person Head Hint 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 { PersonHeadHint24Regular, PersonHeadHint24Filled } from "@fluentui/react-icons";

export function Example() {
  return <PersonHeadHint24Regular aria-label="Person Head Hint" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_person_head_hint_24_regular.svg" width="24" height="24" alt="Person Head Hint">

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.0472 9.00035C18.5128 9.00035 18.8734 9.41467 18.7497 9.86363C18.5951 10.4251 18.3722 10.9584 18.0906 11.4539C17.8605 11.8589 17.3125 11.8971 16.9831 11.5677C16.7221 11.3067 16.6901 10.8991 16.8629 10.573C17.0232 10.2707 17.1561 9.95164 17.2583 9.61917C17.3669 9.26621 17.6779 9.00035 18.0472 9.00035ZM18.0471 7.00035C18.5128 7.00035 18.8734 6.58603 18.7497 6.13706C18.595 5.57557 18.3721 5.04235 18.0906 4.54685C17.8604 4.14189 17.3124 4.10369 16.983 4.43306C16.722 4.69404 16.69 5.10171 16.8629 5.4278C17.0232 5.73009 17.1561 6.04911 17.2583 6.38155C17.3668 6.73451 17.6779 7.00035 18.0471 7.00035ZM13.0005 1.95375C13.0005 1.48805 13.4149 1.1275 13.8638 1.25118C14.4259 1.406 14.9596 1.62915 15.4554 1.91111C15.8603 2.14131 15.8984 2.68924 15.5691 3.01855C15.3081 3.27958 14.9003 3.31157 14.5742 3.13857C14.2716 2.97804 13.9522 2.84493 13.6193 2.74256C13.2664 2.63402 13.0005 2.32301 13.0005 1.95375ZM11.0005 1.95367C11.0005 2.32295 10.7347 2.63396 10.3817 2.7425C10.0492 2.84473 9.73019 2.97764 9.42788 3.13791C9.10179 3.31079 8.69413 3.27875 8.43314 3.01777C8.10377 2.6884 8.14197 2.14036 8.54695 1.91023C9.04248 1.62863 9.57574 1.40577 10.1373 1.2511C10.5862 1.12744 11.0005 1.48799 11.0005 1.95367ZM5.91117 4.54529C6.14137 4.14046 6.68928 4.10233 7.01859 4.43164C7.27962 4.69267 7.31161 5.10044 7.1386 5.42655C6.97804 5.72921 6.84492 6.04865 6.74254 6.38155C6.63399 6.73451 6.32298 7.00035 5.95372 7.00035C5.48803 7.00035 5.12747 6.58603 5.25115 6.13706C5.40599 5.57498 5.62916 5.04122 5.91117 4.54529ZM5.95368 9.00035C5.48799 9.00035 5.12744 9.41467 5.2511 9.86363C5.40593 10.4257 5.6291 10.9595 5.9111 11.4555C6.1413 11.8603 6.68922 11.8984 7.01853 11.5691C7.27957 11.3081 7.31155 10.9003 7.13856 10.5742C6.978 10.2715 6.84487 9.9521 6.7425 9.61917C6.63396 9.26621 6.32295 9.00035 5.95368 9.00035ZM17.7545 14C18.9966 14 20.0034 15.0069 20.0034 16.2489V16.8243C20.0034 17.7186 19.6838 18.5834 19.1023 19.2628C17.5329 21.0963 15.1457 22.0012 12.0004 22.0012C8.8545 22.0012 6.46849 21.096 4.90219 19.2617C4.32242 18.5828 4.00391 17.7193 4.00391 16.8266V16.2489C4.00391 15.0069 5.01076 14 6.25278 14H17.7545ZM17.7545 15.5H6.25278C5.83919 15.5 5.50391 15.8353 5.50391 16.2489V16.8266C5.50391 17.3622 5.69502 17.8803 6.04287 18.2877C7.29618 19.7554 9.26206 20.5012 12.0004 20.5012C14.7387 20.5012 16.7063 19.7553 17.9627 18.2874C18.3117 17.8798 18.5034 17.3609 18.5034 16.8243V16.2489C18.5034 15.8353 18.1681 15.5 17.7545 15.5ZM9.5 8C9.5 6.61929 10.6193 5.5 12 5.5C13.3807 5.5 14.5 6.61929 14.5 8C14.5 9.38071 13.3807 10.5 12 10.5C10.6193 10.5 9.5 9.38071 9.5 8ZM12 4C9.79086 4 8 5.79086 8 8C8 10.2091 9.79086 12 12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4Z" 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_head_hint_24_regular.svg";

Details

Keywords

soundaudionoisecancelnoisetransparentnoisecancellingnoisetransparencyspeakerdevicehumanuser