Quiz New icon

Use the Quiz New 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 { QuizNew24Regular, QuizNew24Filled } from "@fluentui/react-icons";

export function Example() {
  return <QuizNew24Regular aria-label="Quiz New" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_quiz_new_24_regular.svg" width="24" height="24" alt="Quiz New">

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="M17.5 12C20.5376 12 23 14.4624 23 17.5C23 20.5376 20.5376 23 17.5 23C14.4624 23 12 20.5376 12 17.5C12 14.4624 14.4624 12 17.5 12ZM17.5 13.999C17.2239 13.999 17.0001 14.223 17 14.499V17H14.4951C14.2195 17.0003 13.9961 17.224 13.9961 17.5C13.9961 17.776 14.2195 17.9997 14.4951 18H17.001V20.5039C17.0012 20.7798 17.225 21.0038 17.501 21.0039C17.777 21.0039 18.0008 20.7799 18.001 20.5039V18H20.4971C20.7727 17.9997 20.9961 17.776 20.9961 17.5C20.9961 17.224 20.7727 17.0003 20.4971 17H18V14.499C17.9999 14.223 17.7761 13.999 17.5 13.999ZM17.75 3C19.5449 3 21 4.45507 21 6.25V12.0244C20.5365 11.7276 20.0338 11.4869 19.5 11.3145V6.25C19.5 5.2835 18.7165 4.5 17.75 4.5H6.25C5.2835 4.5 4.5 5.2835 4.5 6.25V17.75C4.5 18.7165 5.2835 19.5 6.25 19.5H11.3145C11.4869 20.0338 11.7276 20.5365 12.0244 21H6.25C4.45507 21 3 19.5449 3 17.75V6.25C3 4.45507 4.45507 3 6.25 3H17.75ZM11.0771 16.5C11.0268 16.826 11 17.1599 11 17.5C11 17.6683 11.0089 17.8349 11.0215 18H6.75C6.33579 18 6 17.6642 6 17.25C6.00001 16.8358 6.33579 16.5 6.75 16.5H11.0771ZM12.3789 13.499C12.0226 13.9544 11.7248 14.4578 11.499 14.999H6.75C6.33579 14.999 6 14.6632 6 14.249C6.00001 13.8348 6.33579 13.499 6.75 13.499H12.3789ZM10 4.99609C10.3046 4.99615 10.5791 5.18087 10.6943 5.46289L12.9414 10.9658C13.0979 11.3492 12.9146 11.7867 12.5312 11.9434C12.1478 12.1 11.7094 11.9157 11.5527 11.5322L11.1299 10.4971H8.86816L8.44434 11.5332C8.2875 11.9165 7.84916 12.1001 7.46582 11.9434C7.0826 11.7865 6.89893 11.3482 7.05566 10.9648L9.30566 5.46289C9.42094 5.18096 9.69542 4.9961 10 4.99609ZM15.75 4.99609C16.1641 4.99609 16.4999 5.33201 16.5 5.74609V6.99609H17.75C18.1641 6.99609 18.4998 7.33205 18.5 7.74609C18.5 8.16031 18.1642 8.49609 17.75 8.49609H16.5V9.74609C16.5 10.1603 16.1642 10.4961 15.75 10.4961C15.3358 10.4961 15 10.1603 15 9.74609V8.49609H13.75C13.3358 8.49609 13 8.16031 13 7.74609C13.0002 7.33205 13.3359 6.99609 13.75 6.99609H15V5.74609C15.0001 5.33201 15.3359 4.99609 15.75 4.99609ZM9.48145 8.99707H10.5176L10 7.72852L9.48145 8.99707Z" 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/quiz_new_24_regular.svg";

Details

Keywords

newaddplus