Diversity icon

Use the Diversity 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 { Diversity24Regular, Diversity24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Diversity24Regular aria-label="Diversity" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_diversity_24_regular.svg" width="24" height="24" alt="Diversity">

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="M13 5.25C13 4.00736 14.0074 3 15.25 3H18.75C19.9926 3 21 4.00736 21 5.25V8.75C21 9.99264 19.9926 11 18.75 11H15.25C14.0074 11 13 9.99264 13 8.75V5.25ZM15.25 4.5C14.8358 4.5 14.5 4.83579 14.5 5.25V8.75C14.5 9.16421 14.8358 9.5 15.25 9.5H18.75C19.1642 9.5 19.5 9.16421 19.5 8.75V5.25C19.5 4.83579 19.1642 4.5 18.75 4.5H15.25ZM8.44969 3.89843C7.84719 2.70052 6.15281 2.70052 5.55031 3.89843L3.17842 8.61429C2.629 9.70668 3.41489 11 4.62811 11L9.37189 11C10.5851 11 11.371 9.70668 10.8216 8.61429L8.44969 3.89843ZM6.89036 4.57242C6.91066 4.53207 6.92838 4.52044 6.93681 4.51545C6.95022 4.50751 6.97195 4.5 7 4.5C7.02805 4.5 7.04978 4.50751 7.06318 4.51545C7.07161 4.52044 7.08934 4.53207 7.10964 4.57242L9.48152 9.28828C9.49857 9.32217 9.50082 9.34594 9.4998 9.36416C9.49856 9.38629 9.49124 9.4125 9.47584 9.43785C9.46044 9.46319 9.44231 9.47894 9.42831 9.48716C9.41795 9.49324 9.4027 9.5 9.37189 9.5L4.62811 9.5C4.5973 9.5 4.58205 9.49324 4.57169 9.48716C4.55769 9.47894 4.53956 9.46319 4.52416 9.43785C4.50876 9.4125 4.50144 9.38629 4.5002 9.36416C4.49918 9.34594 4.50143 9.32217 4.51848 9.28829L6.89036 4.57242ZM4.5 17C4.5 15.6193 5.61929 14.5 7 14.5C8.38071 14.5 9.5 15.6193 9.5 17C9.5 18.3807 8.38071 19.5 7 19.5C5.61929 19.5 4.5 18.3807 4.5 17ZM7 13C4.79086 13 3 14.7909 3 17C3 19.2091 4.79086 21 7 21C9.20914 21 11 19.2091 11 17C11 14.7909 9.20914 13 7 13ZM17.625 12.7448C17.2382 12.5215 16.7618 12.5215 16.375 12.7448L13.6274 14.3311C13.2407 14.5544 13.0024 14.9671 13.0024 15.4137V18.5863C13.0024 19.0329 13.2407 19.4456 13.6274 19.6689L16.375 21.2552C16.7618 21.4785 17.2382 21.4785 17.625 21.2552L20.3726 19.6689C20.7593 19.4456 20.9976 19.0329 20.9976 18.5863V15.4137C20.9976 14.9671 20.7593 14.5544 20.3726 14.3311L17.625 12.7448ZM14.5024 15.558L17 14.116L19.4976 15.558V18.442L17 19.884L14.5024 18.442V15.558Z" 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/diversity_24_regular.svg";

Details

Keywords

differentuniquespecial