Adding 7 new icons

packages/fluentui/CHANGELOG.md

@@ -37,6 +37,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - Export `broadcast-view-fullscreen` and `broadcast-view-left` as SVG icons @davidfoulkejr ([#12126](https://github.com/OfficeDev/office-ui-fabric-react/pull/12126))
 - Add `square` prop on the `Avatar` component @mnajdova ([#12277](https://github.com/OfficeDev/office-ui-fabric-react/pull/12277))
+- Adding `raise hand`, `raise hand colored`, `raise hand disabled`, `merge calls`, `share location`, `panorama` and `spotlight` icons @TanelVari ([#12212](https://github.com/OfficeDev/office-ui-fabric-react/pull/12212))
 - Expose `contentWrapper` shorthand from `AccordionTitle` @silviuavram ([#12265](https://github.com/OfficeDev/office-ui-fabric-react/pull/12265))
 
 ### Documentation

packages/fluentui/react/src/themes/teams/components/Icon/svg/icons/index.ts

@@ -108,6 +108,7 @@ import markAsUnread from './markAsUnread';
 import meetingNew from './meetingNew';
 import mention from './mention';
 import menu from './menu';
+import mergeCalls from './mergeCalls';
 import messageSeen from './messageSeen';
 import mic from './mic';
 import micOff from './micOff';
@@ -120,6 +121,7 @@ import numberList from './numberList';
 import oneDrive from './oneDrive';
 import outdent from './outdent';
 import openOutside from './openOutside';
+import panorama from './panorama';
 import pause from './pause';
 import pauseThick from './pauseThick';
 import paperclip from './paperclip';
@@ -136,6 +138,9 @@ import qna from './qna';
 import questionCircle from './questionCircle';
 import quote from './quote';
 import readAloud from './read-aloud';
+import raiseHand from './raiseHand';
+import raiseHandColored from './raiseHandColored';
+import raiseHandDisabled from './raiseHandDisabled';
 import redbang from './redbang';
 import redo from './redo';
 import removeFormat from './removeFormat';
@@ -147,10 +152,12 @@ import send from './send';
 import settings from './settings';
 import settingsAudio from './settingsAudio';
 import shareAlt from './shareAlt';
+import shareLocation from './shareLocation';
 import shareTo from './shareTo';
 import skypeLogo from './skypeLogo';
 import snooze from './snooze';
 import speakerMute from './speakerMute';
+import spotlight from './spotlight';
 import star from './star';
 import sticker from './sticker';
 import strike from './strike';
@@ -285,6 +292,7 @@ export default {
   'meeting-new': meetingNew,
   mention,
   menu,
+  'merge-calls': mergeCalls,
   'message-seen': messageSeen,
   mic,
   'no-presenter': noPresenter,
@@ -301,6 +309,7 @@ export default {
   paperclip,
   'participant-add': addParticipant,
   'participant-remove': participantRemove,
+  panorama,
   pause,
   'pause-thick': pauseThick,
   'phone-clock': phoneClock,
@@ -314,6 +323,9 @@ export default {
   qna,
   'question-circle': questionCircle,
   quote,
+  'raise-hand': raiseHand,
+  'raise-hand-colored': raiseHandColored,
+  'raise-hand-disabled': raiseHandDisabled,
   'read-aloud': readAloud,
   redbang,
   redo,
@@ -326,7 +338,9 @@ export default {
   settings,
   'settings-audio': settingsAudio,
   'share-alt': shareAlt,
+  'share-location': shareLocation,
   'share-to': shareTo,
+  spotlight,
   star,
   sticker,
   strike,

packages/fluentui/react/src/themes/teams/components/Icon/svg/icons/mergeCalls.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { TeamsProcessedSvgIconSpec } from '../types';
+import { teamsIconClassNames } from '../teamsIconClassNames';
+
+export default {
+  icon: ({ classes }) => (
+    <svg className={classes.svg} viewBox="8 8 16 16" role="presentation" focusable="false">
+      <path
+        className={cx(teamsIconClassNames.outline, classes.outlinePart)}
+        d="M11.61,11a1.49,1.49,0,0,1,1,.38L16.68,15h4.6l-2.64-2.65A.5.5,0,0,1,19,11.5a.47.47,0,0,1,.35.15l3.5,3.5a.48.48,0,0,1,0,.7l-3.5,3.5a.47.47,0,0,1-.35.15.5.5,0,0,1-.35-.85L21.28,16h-4.6l-4.07,3.62a1.52,1.52,0,0,1-1,.38H9.49a.51.51,0,0,1-.5-.5C9,19,9.53,19,9.9,19s.95.07,1.43.07a1,1,0,0,0,.62-.15l3.79-3.38L12,12.12a1,1,0,0,0-.62-.15c-.48,0-.95.07-1.42.07S9,12,9,11.5a.51.51,0,0,1,.5-.5Z"
+      />
+      <path
+        className={cx(teamsIconClassNames.filled, classes.filledPart)}
+        d="M11.61,10.5a2,2,0,0,1,1.33.51l3.94,3.49h3.2l-1.8-1.79A1,1,0,0,1,18,12a1,1,0,0,1,1-1,.94.94,0,0,1,.71.29l3.5,3.5a1,1,0,0,1,0,1.42l-3.5,3.5A.94.94,0,0,1,19,20a1,1,0,0,1-1-1,1,1,0,0,1,.29-.71l1.8-1.79h-3.2L12.94,20a1.94,1.94,0,0,1-1.33.51H9.49a1,1,0,0,1,0-2h2.12l3.37-3-3.37-3H9.49a1,1,0,0,1,0-2Z"
+      />
+    </svg>
+  ),
+  styles: {}
+} as TeamsProcessedSvgIconSpec;

packages/fluentui/react/src/themes/teams/components/Icon/svg/icons/panorama.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { TeamsProcessedSvgIconSpec } from '../types';
+
+export default {
+  icon: ({ classes }) => (
+    <svg className={classes.svg} viewBox="8 8 16 16" role="presentation" focusable="false">
+      <path d="M24,12v8.1a1.51,1.51,0,0,1-1.51,1.5,2.05,2.05,0,0,1-.55-.1A27.47,27.47,0,0,0,16,20.37,28.58,28.58,0,0,0,9.89,21.5a1.65,1.65,0,0,1-.38.05A1.5,1.5,0,0,1,8,20.05V12a1.51,1.51,0,0,1,1.51-1.5,2.2,2.2,0,0,1,.56.1A26.28,26.28,0,0,0,16,11.66a27.84,27.84,0,0,0,6.1-1.16,1.75,1.75,0,0,1,.4-.05A1.5,1.5,0,0,1,24,12Zm-8,.65a27.6,27.6,0,0,1-6.34-1.19l-.15,0a.57.57,0,0,0-.57.55v8.11a.57.57,0,0,0,.57.56c.2,0,1.64-.4,2-.48V17.85h2.36v1.8l.58-.1V17.27H18v2.35l.59.1V17.85h2.35v2.38c.29.07,1.41.38,1.6.38a.57.57,0,0,0,.57-.55V12a.57.57,0,0,0-.56-.56,1.21,1.21,0,0,0-.33.07A26.53,26.53,0,0,1,16,12.6Zm-3.34,2.31a1.18,1.18,0,1,1-1.18,1.18A1.2,1.2,0,0,1,12.66,14.91Zm7.06,0a1.18,1.18,0,0,1,0,2.36,1.21,1.21,0,0,1-1.18-1.18A1.2,1.2,0,0,1,19.72,14.91Zm-3.53-.59a1.21,1.21,0,0,1,1.18,1.18,1.19,1.19,0,0,1-1.18,1.17,1.18,1.18,0,0,1,0-2.35Z" />
+    </svg>
+  ),
+  styles: {}
+} as TeamsProcessedSvgIconSpec;

packages/fluentui/react/src/themes/teams/components/Icon/svg/icons/raiseHand.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { TeamsProcessedSvgIconSpec } from '../types';
+import { teamsIconClassNames } from '../teamsIconClassNames';
+
+export default {
+  icon: ({ classes }) => (
+    <svg className={classes.svg} viewBox="8 8 16 16" role="presentation" focusable="false">
+      <path
+        className={cx(teamsIconClassNames.outline, classes.outlinePart)}
+        d="M21.31,15.22a3.68,3.68,0,0,0-2.06.69l-.19.12c-.13.08-.26.16-.35.23l-.12.09c.05-.78.16-2.12.25-3.18s.16-2.05.19-2.53a1.48,1.48,0,0,0-1.54-1.37,2,2,0,0,0-.68.12A1.48,1.48,0,0,0,15.19,8a1.85,1.85,0,0,0-1.12.27,2,2,0,0,0-.58.75,1.58,1.58,0,0,0-2.33,1.23v.87a2,2,0,0,0-.61-.1A1.49,1.49,0,0,0,9,12.41a11,11,0,0,0,.09,1.27l.08.91c.06.77.12,1.56.12,2.33,0,.09,0,.17,0,.25s0,.21,0,.31a7.16,7.16,0,0,0,1.51,4.69,3.28,3.28,0,0,1,.4.53,1.68,1.68,0,0,0,1.19,1.09,10.1,10.1,0,0,0,2.15.21c.92,0,2.63,0,3.17-1.34l0-.25c0-.07,0-.2.06-.28a11,11,0,0,0,2.48-2.94l0-.1a2.41,2.41,0,0,1,.27-.48,3.39,3.39,0,0,1,1.26-.89l.13,0c.35-.14,1-.4,1-1.09A1.55,1.55,0,0,0,21.31,15.22Zm.31,1.52-.16.07A4.23,4.23,0,0,0,19.82,18a3.47,3.47,0,0,0-.4.67l0,.1A10.56,10.56,0,0,1,17,21.48a1.4,1.4,0,0,0-.28.74c0,.05,0,.1,0,.1h0c-.28.68-1.54.68-2.23.68a10,10,0,0,1-1.92-.18.75.75,0,0,1-.49-.49,4.21,4.21,0,0,0-.59-.83,6.2,6.2,0,0,1-1.25-4,1.93,1.93,0,0,1,0-.24c0-.11,0-.21,0-.32,0-.81-.07-1.62-.13-2.41l-.08-.93A10.78,10.78,0,0,1,10,12.46c0-.25.24-.43.6-.44s.56.08.58.41.19,3.67.19,3.67a.5.5,0,0,0,.5.47h0a.5.5,0,0,0,.48-.53l-.2-3.76-.08-2c0-.34.33-.51.68-.49s.57.27.58.52l.1,4.55a.5.5,0,0,0,.5.49h0a.51.51,0,0,0,.49-.51s-.1-4.38-.09-4.57c0-.76,0-1.35.86-1.31.67,0,.62.64.61,1.51l0,.84L15.65,15a.5.5,0,0,0,.48.52h0a.5.5,0,0,0,.5-.47L16.82,11l0-.38c0-.25.32-.39.65-.36s.55.23.54.47c0,.4-.1,1.29-.19,2.35-.18,2.19-.29,3.64-.29,3.89v.35a.66.66,0,0,0,.27.17c.18.05.44.27,1.49-.43a1.59,1.59,0,0,1,.27-.18l.24-.16a2.78,2.78,0,0,1,1.49-.51c.28,0,.69.14.7.32A1.42,1.42,0,0,1,21.62,16.74Z"
+      />
+      <path
+        className={cx(teamsIconClassNames.filled, classes.filledPart)}
+        d="M21.31,15.22a3.68,3.68,0,0,0-2.06.69l-.19.12c-.13.08-.26.16-.35.23l-.12.09c.05-.78.16-2.12.25-3.18s.16-2.05.19-2.53a1.48,1.48,0,0,0-1.54-1.37,1.87,1.87,0,0,0-.62.1.35.35,0,0,1,.22.36l-.59,5.36a.36.36,0,0,1-.35.31h0A.35.35,0,0,1,15.8,15l.6-5.36a.34.34,0,0,1,.38-.31h0A1.49,1.49,0,0,0,15.19,8a1.85,1.85,0,0,0-1.12.27A2.06,2.06,0,0,0,13.5,9h0a.34.34,0,0,1,.37.32l.4,5.55a.35.35,0,0,1-.33.37h0a.35.35,0,0,1-.35-.32l-.4-5.55A.35.35,0,0,1,13.47,9a1.58,1.58,0,0,0-2.31,1.24v.84l.09,0a.36.36,0,0,1,.39.31L12.21,16a.36.36,0,0,1-.31.39h0a.35.35,0,0,1-.35-.31L11,11.45a.34.34,0,0,1,.17-.34,2,2,0,0,0-.57-.09A1.49,1.49,0,0,0,9,12.41a11,11,0,0,0,.09,1.27l.08.91c.06.77.12,1.56.12,2.33,0,.09,0,.17,0,.25s0,.21,0,.31a7.16,7.16,0,0,0,1.51,4.69,3.28,3.28,0,0,1,.4.53,1.68,1.68,0,0,0,1.19,1.09,10.1,10.1,0,0,0,2.15.21c.92,0,2.63,0,3.17-1.34l0-.25c0-.07,0-.2.06-.28a11,11,0,0,0,2.48-2.94l0-.1a2.41,2.41,0,0,1,.27-.48,3.39,3.39,0,0,1,1.26-.89l.13,0c.35-.14,1-.4,1-1.09A1.55,1.55,0,0,0,21.31,15.22Z"
+      />
+    </svg>
+  ),
+  styles: {}
+} as TeamsProcessedSvgIconSpec;

packages/fluentui/react/src/themes/teams/components/Icon/svg/icons/raiseHandColored.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { TeamsProcessedSvgIconSpec } from '../types';
+
+export default {
+  icon: ({ classes }) => (
+    <svg role="presentation" focusable="false" viewBox="0 0 32 32" className={classes.svg}>
+      <defs>
+        <linearGradient
+          id="a"
+          x1="14.41"
+          y1="-3679.44"
+          x2="14.41"
+          y2="-3693.09"
+          gradientTransform="matrix(1, 0, 0, -1, 0, -3662)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#fdce4c" />
+          <stop offset="0.25" stopColor="#fec342" />
+          <stop offset="0.7" stopColor="#ffa528" />
+          <stop offset="0.75" stopColor="#ffa225" />
+          <stop offset="0.89" stopColor="#fda227" />
+          <stop offset="0.96" stopColor="#f7a22e" />
+          <stop offset="1" stopColor="#eda339" />
+        </linearGradient>
+      </defs>
+      <path
+        d="M19,3.61a1.76,1.76,0,0,0-1.58.8.74.74,0,0,0-.33-.09l-.15,0,0-1.47a1.77,1.77,0,0,0-1.72-1.82,1.8,1.8,0,0,0-1.82,1.72l0,1.2a.78.78,0,0,0-.45-.15h0a.88.88,0,0,0-.28.06,1.77,1.77,0,0,0-3.41.71L9.28,7.1h0a.82.82,0,0,0-.71.48A1.76,1.76,0,0,0,5.63,9l.43,6.9A1.77,1.77,0,0,0,7.83,17.6H18.24A1.77,1.77,0,0,0,20,16l.08-1.26c.12-1.91.34-5.42.55-9.21A1.76,1.76,0,0,0,19,3.61Z"
+        fill="#fdce4c"
+      />
+      <path
+        d="M19.85,23.29a1.9,1.9,0,0,1-.71-1.69c.21-1.52,1.44-3.21,3.15-4.72s4.32-1.84,4.88.18c.32,1.15-1.06,1.58-1.35,1.73a5.7,5.7,0,0,0-3.05,3.48A2,2,0,0,1,19.85,23.29Zm-1.37,1.37Z"
+        fill="#fdc443"
+      />
+      <path
+        d="M20.59,18.79c-.3.19-.87-.08-.73-1.18s.11-1.19.2-2.69c0-.38-14.08-.5-14,1.05,0,.91,0,1.2.06,2.13A21.22,21.22,0,0,0,7,25.38C7.82,27.84,9.09,28.27,9.2,29c.23,1.63,2,2,4.36,2s4.75-.09,5-2.72l.2-.69a19.8,19.8,0,0,0,4-5.34C22.83,22.15,20.59,18.79,20.59,18.79Z"
+        fill="url(#a)"
+      />
+      <path
+        d="M13.44,25.13a.81.81,0,0,1-.8-.64A6.4,6.4,0,0,1,14.73,19c1.5-1.24,3.81-1.91,5.62-.62a.82.82,0,0,1-1,1.34c-1.25-.9-2.91,0-3.62.54a4.84,4.84,0,0,0-1.53,3.9.82.82,0,0,1-.62,1Z"
+        fill="#8a5835"
+      />
+      <path
+        d="M9.53,16.18a.82.82,0,0,1-.82-.79L8.44,7.94a.82.82,0,0,1,.79-.85.8.8,0,0,1,.85.79l.27,7.45a.82.82,0,0,1-.79.85Z"
+        fill="#8a5835"
+      />
+      <path
+        d="M13.05,15.2a.82.82,0,0,1-.82-.81L12.1,4.65a.82.82,0,0,1,.81-.83h0a.82.82,0,0,1,.82.81l.13,9.74a.82.82,0,0,1-.81.83Z"
+        fill="#8a5835"
+      />
+      <path d="M16.65,15.36h0a.82.82,0,0,1-.79-.85l.38-9.4a.82.82,0,1,1,1.64.06l-.38,9.4A.82.82,0,0,1,16.65,15.36Z" fill="#8a5835" />
+    </svg>
+  ),
+  styles: {}
+} as TeamsProcessedSvgIconSpec;

packages/fluentui/react/src/themes/teams/components/Icon/svg/icons/raiseHandDisabled.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { TeamsProcessedSvgIconSpec } from '../types';
+import { teamsIconClassNames } from '../teamsIconClassNames';
+
+export default {
+  icon: ({ classes }) => (
+    <svg className={classes.svg} viewBox="8 8 16 16" role="presentation" focusable="false">
+      <g className={cx(teamsIconClassNames.outline, classes.outlinePart)}>
+        <path d="M9.17,14.59c.06.77.12,1.56.12,2.33,0,.09,0,.17,0,.25s0,.21,0,.31a8.87,8.87,0,0,0,.41,2.72l.81-.81a8.71,8.71,0,0,1-.22-1.91,1.93,1.93,0,0,1,0-.24c0-.11,0-.21,0-.32,0-.81-.07-1.62-.13-2.41l-.08-.93A10.78,10.78,0,0,1,10,12.46c0-.25.24-.43.6-.44s.56.08.58.41.19,3.67.19,3.67a.5.5,0,0,0,.5.47h0a.5.5,0,0,0,.48-.53l-.2-3.76-.08-2c0-.34.33-.51.68-.49s.57.27.58.52l.1,4.55a.5.5,0,0,0,.5.49h0a.51.51,0,0,0,.49-.51s-.1-4.38-.09-4.57c0-.76,0-1.35.86-1.31.67,0,.62.64.61,1.51l0,.84-.12,2.85,1.05-1L16.82,11l0-.38c0-.25.32-.39.65-.36s.55.23.54.47-.06.68-.1,1.21L19,10.86c0-.08,0-.16,0-.22a1.48,1.48,0,0,0-1.54-1.37,2,2,0,0,0-.68.12A1.48,1.48,0,0,0,15.19,8a1.85,1.85,0,0,0-1.12.27,2,2,0,0,0-.58.75,1.58,1.58,0,0,0-2.33,1.23v.87a2,2,0,0,0-.61-.1A1.49,1.49,0,0,0,9,12.41a11,11,0,0,0,.09,1.27Z" />
+        <path d="M23.85,8.86a.5.5,0,1,0-.71-.71l-.7.7h0L8.15,23.15a.48.48,0,0,0,0,.7.48.48,0,0,0,.7,0L10.67,22a1.71,1.71,0,0,0,.11.14,3.28,3.28,0,0,1,.4.53,1.68,1.68,0,0,0,1.19,1.09,10.1,10.1,0,0,0,2.15.21c.92,0,2.63,0,3.17-1.34l0-.25c0-.07,0-.2.06-.28a11,11,0,0,0,2.48-2.94l0-.1a2.41,2.41,0,0,1,.27-.48,3.39,3.39,0,0,1,1.26-.89l.13,0c.35-.14,1-.4,1-1.09a1.55,1.55,0,0,0-1.69-1.36,3.68,3.68,0,0,0-2.06.69l-.19.12c-.13.08-.26.16-.35.23l-.12.09c0-.61.11-1.54.19-2.42Zm-4.54,8.21a1.59,1.59,0,0,1,.27-.18l.24-.16a2.78,2.78,0,0,1,1.49-.51c.28,0,.69.14.7.32a1.42,1.42,0,0,1-.39.2l-.16.07A4.23,4.23,0,0,0,19.82,18a3.47,3.47,0,0,0-.4.67l0,.1A10.56,10.56,0,0,1,17,21.48a1.4,1.4,0,0,0-.28.74c0,.05,0,.1,0,.1h0c-.28.68-1.54.68-2.23.68a10,10,0,0,1-1.92-.18.75.75,0,0,1-.49-.49,4.21,4.21,0,0,0-.59-.83c0-.05-.09-.12-.14-.18l6.3-6.3c-.08,1.09-.13,1.79-.13,2v.35a.66.66,0,0,0,.27.17C18,17.55,18.26,17.77,19.31,17.07Z" />
+      </g>
+      <g className={cx(teamsIconClassNames.filled, classes.filledPart)}>
+        <path d="M23.85,8.86a.5.5,0,1,0-.71-.71l-15,15a.48.48,0,0,0,0,.7.48.48,0,0,0,.7,0L10.67,22a1.71,1.71,0,0,0,.11.14,3.28,3.28,0,0,1,.4.53,1.68,1.68,0,0,0,1.19,1.09,10.1,10.1,0,0,0,2.15.21c.92,0,2.63,0,3.17-1.34l0-.25c0-.07,0-.2.06-.28a11,11,0,0,0,2.48-2.94l0-.1a2.41,2.41,0,0,1,.27-.48,3.39,3.39,0,0,1,1.26-.89l.13,0c.35-.14,1-.4,1-1.09a1.55,1.55,0,0,0-1.69-1.36,3.68,3.68,0,0,0-2.06.69l-.19.12c-.13.08-.26.16-.35.23l-.12.09c0-.61.11-1.54.19-2.42Z" />
+        <path d="M17.09,9.73l-.38,3.44L19,10.86c0-.07,0-.16,0-.22a1.48,1.48,0,0,0-1.54-1.37,1.87,1.87,0,0,0-.62.1A.35.35,0,0,1,17.09,9.73Z" />
+        <path d="M9.17,14.59c.06.77.12,1.56.12,2.33,0,.09,0,.17,0,.25s0,.21,0,.31a8.87,8.87,0,0,0,.41,2.72L15.92,14l.48-4.3a.34.34,0,0,1,.38-.31h0A1.49,1.49,0,0,0,15.19,8a1.85,1.85,0,0,0-1.12.27A2.06,2.06,0,0,0,13.5,9h0a.34.34,0,0,1,.37.32l.4,5.55a.35.35,0,0,1-.33.37h0a.35.35,0,0,1-.35-.32l-.4-5.55A.35.35,0,0,1,13.47,9a1.58,1.58,0,0,0-2.31,1.24v.84l.09,0a.36.36,0,0,1,.39.31L12.21,16a.36.36,0,0,1-.31.39h0a.35.35,0,0,1-.35-.31L11,11.45a.34.34,0,0,1,.17-.34,2,2,0,0,0-.57-.09A1.49,1.49,0,0,0,9,12.41a11,11,0,0,0,.09,1.27Z" />
+      </g>
+    </svg>
+  ),
+  styles: {}
+} as TeamsProcessedSvgIconSpec;

packages/fluentui/react/src/themes/teams/components/Icon/svg/icons/shareLocation.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { TeamsProcessedSvgIconSpec } from '../types';
+import { teamsIconClassNames } from '../teamsIconClassNames';
+
+export default {
+  icon: ({ classes }) => (
+    <svg className={classes.svg} viewBox="8 8 16 16" role="presentation" focusable="false">
+      <g className={cx(teamsIconClassNames.outline, classes.outlinePart)}>
+        <path d="M20.1,18.38a.51.51,0,0,1-.5-.5A6.61,6.61,0,0,0,13,11.34a.5.5,0,0,1-.5-.5.5.5,0,0,1,.5-.5,7.6,7.6,0,0,1,7.65,7.54A.5.5,0,0,1,20.1,18.38Z" />
+        <path d="M22.49,18.38a.5.5,0,0,1-.5-.5A9,9,0,0,0,13,9a.5.5,0,0,1,0-1,10,10,0,0,1,10,9.88A.51.51,0,0,1,22.49,18.38Z" />
+        <path d="M14,14a2.9,2.9,0,0,1,3,3.12,3.71,3.71,0,0,1-.64,2.08c-.35.53-.74,1-1.14,1.56-.25.31-.49.63-.73.95s-.33.47-.49.71c-.15-.24-.32-.47-.49-.71s-.48-.64-.73-1c-.41-.52-.79-1-1.13-1.54A3.7,3.7,0,0,1,11,17.12,2.9,2.9,0,0,1,14,14m0-1a3.89,3.89,0,0,0-4,4.12,4.69,4.69,0,0,0,.81,2.63c.58.89,1.27,1.69,1.9,2.55l.59.87c.14.22.26.46.42.67A.34.34,0,0,0,14,24a.33.33,0,0,0,.28-.16c.16-.21.28-.45.42-.67s.39-.58.6-.87c.62-.85,1.31-1.66,1.89-2.55A4.69,4.69,0,0,0,18,17.12,3.89,3.89,0,0,0,14,13Z" />
+        <circle cx="14" cy="17" r="1" />
+      </g>
+      <g className={cx(teamsIconClassNames.filled, classes.filledPart)}>
+        <path d="M20.1,18.38a.51.51,0,0,1-.5-.5A6.61,6.61,0,0,0,13,11.34a.5.5,0,0,1-.5-.5.5.5,0,0,1,.5-.5,7.6,7.6,0,0,1,7.65,7.54A.5.5,0,0,1,20.1,18.38Z" />
+        <path d="M22.49,18.38a.5.5,0,0,1-.5-.5A9,9,0,0,0,13,9a.5.5,0,0,1,0-1,10,10,0,0,1,10,9.88A.51.51,0,0,1,22.49,18.38Z" />
+        <path d="M14,13a3.89,3.89,0,0,1,4,4.12,4.69,4.69,0,0,1-.81,2.63c-.58.89-1.27,1.7-1.89,2.55q-.32.43-.6.87c-.14.22-.26.46-.42.67a.32.32,0,0,1-.56,0c-.16-.21-.28-.45-.42-.67l-.59-.87c-.63-.86-1.32-1.66-1.9-2.55A4.69,4.69,0,0,1,10,17.12,3.89,3.89,0,0,1,14,13Zm0,2.5A1.5,1.5,0,1,0,15.5,17,1.5,1.5,0,0,0,14,15.5Z" />
+      </g>
+    </svg>
+  ),
+  styles: {}
+} as TeamsProcessedSvgIconSpec;

packages/fluentui/react/src/themes/teams/components/Icon/svg/icons/spotlight.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { TeamsProcessedSvgIconSpec } from '../types';
+
+export default {
+  icon: ({ classes }) => (
+    <svg className={classes.svg} viewBox="8 8 16 16" role="presentation" focusable="false">
+      <path d="M20.39,16.8a.48.48,0,0,1,.43.28s.72,1.5.85,1.79l1.89.29a.51.51,0,0,1,.42.5c0,.48-1.17,1.43-1.51,1.77a10.19,10.19,0,0,1,.33,2.05.5.5,0,0,1-.5.51c-.47,0-1.46-.76-1.91-1a6.72,6.72,0,0,1-1.92,1,.52.52,0,0,1-.49-.51,11.82,11.82,0,0,1,.32-2.05c-.34-.34-1.51-1.3-1.51-1.77a.51.51,0,0,1,.41-.5h0l1.89-.29L20,17.09A.47.47,0,0,1,20.39,16.8Z" />
+      <path d="M22.31,8A1.73,1.73,0,0,1,24,9.7V16a.6.6,0,0,1-.57.51.57.57,0,0,1-.57-.62V9.72a.59.59,0,0,0-.56-.57H9.7a.59.59,0,0,0-.56.56V20a.59.59,0,0,0,.56.56h1.73V18.3a1.14,1.14,0,0,1,1.12-1.15h2.77a.58.58,0,1,1-.05,1.15h-2.7v2.28h2.75a.58.58,0,0,1,.57.57.59.59,0,0,1-.57.58H9.69A1.72,1.72,0,0,1,8,20V9.7A1.73,1.73,0,0,1,9.69,8Z" />
+      <path d="M16,10.3a2.86,2.86,0,1,1-2.86,2.85A2.84,2.84,0,0,1,16,10.3Zm0,1.14a1.72,1.72,0,1,0,1.71,1.71A1.7,1.7,0,0,0,16,11.44Z" />
+    </svg>
+  ),
+  styles: {}
+} as TeamsProcessedSvgIconSpec;