feat(plasma-icons): Add icons for 24 dp from N to W

examples/demo-canvas-app/pages/index.tsx

@@ -12,6 +12,7 @@ const menu = [
     { href: '/test/components/tabs/', title: 'Tabs' },
     { href: '/test/components/text-field/', title: 'TextField' },
     { href: '/test/components/toast/', title: 'Toast' },
+    { href: '/test/components/icons/', title: 'Icons' },
 ];
 
 const StyledCard = styled.a`

examples/demo-canvas-app/pages/test/components/icons.tsx

@@ -0,0 +1,31 @@
+import { iconSet16, iconSet24, iconSet36, IconRootScalable } from '@sberdevices/plasma-icons';
+import { IconSetUnionSize } from '@sberdevices/plasma-icons/scalable/IconRoot';
+import { ParagraphText1 } from '@sberdevices/plasma-ui';
+
+export default function IconsPage() {
+    const iconSets = {
+        ...iconSet16,
+        ...iconSet24,
+        ...iconSet36,
+    };
+
+    return (
+        <>
+            {Object.keys(iconSets).map((iconName) => (
+                <div key={iconName} style={{ display: 'flex', alignItems: 'center' }}>
+                    <IconRootScalable size="s" iconName={iconName as IconSetUnionSize} color="inherit" />
+                    <ParagraphText1> - {iconName}</ParagraphText1>
+                </div>
+            ))}
+        </>
+    );
+}
+
+export function getStaticProps() {
+    return {
+        props: {
+            title: 'Icons',
+            back: true,
+        },
+    };
+}

packages/plasma-icons/src/index.ts

@@ -170,3 +170,8 @@ export type { IconProps, IconSize } from './IconRoot';
 
 export { Icon, iconSectionsSet } from './Icon';
 export type { IconName } from './Icon';
+
+export { iconSet16 } from './scalable/Icon.assets.16';
+export { iconSet24 } from './scalable/Icon.assets.24';
+export { iconSet36 } from './scalable/Icon.assets.36';
+export { IconRoot as IconRootScalable } from './scalable';

packages/plasma-icons/src/scalable/Icon.assets.24/AddSmile.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const AddSmile: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            d="M19 1C18.4477 1 18 1.44772 18 2V4H16C15.4477 4 15 4.44771 15 5C15 5.55228 15.4477 6 16 6H18V8C18 8.55229 18.4477 9 19 9C19.5523 9 20 8.55229 20 8V6H22C22.5523 6 23 5.55228 23 5C23 4.44772 22.5523 4 22 4H20V2C20 1.44772 19.5523 1 19 1Z"
+            fill="currentColor"
+        />
+        <path
+            d="M7.99988 10C7.99988 9.44771 8.44759 9 8.99988 9H9.00988C9.56216 9 10.0099 9.44771 10.0099 10C10.0099 10.5523 9.56216 11 9.00988 11H8.99988C8.44759 11 7.99988 10.5523 7.99988 10Z"
+            fill="currentColor"
+        />
+        <path
+            d="M13.9999 10C13.9999 9.44771 14.4476 9 14.9999 9H15.0099C15.5622 9 16.0099 9.44771 16.0099 10C16.0099 10.5523 15.5622 11 15.0099 11H14.9999C14.4476 11 13.9999 10.5523 13.9999 10Z"
+            fill="currentColor"
+        />
+        <path
+            d="M8.95811 13.2236H15.0618C15.4196 13.2236 15.6932 13.5604 15.63 13.8761C15.3143 15.5809 13.82 16.8858 12.0099 16.8858C10.1999 16.8858 8.70554 15.5809 8.38984 13.8761C8.3267 13.5393 8.60031 13.2236 8.95811 13.2236Z"
+            fill="currentColor"
+        />
+        <path
+            d="M11.9999 3C12.3379 3 12.6716 3.01864 13 3.05494V4.8689C12.6731 4.82348 12.3392 4.8 11.9999 4.8C8.02343 4.8 4.79988 8.02355 4.79988 12C4.79988 15.9764 8.02343 19.2 11.9999 19.2C15.9763 19.2 19.1999 15.9764 19.1999 12C19.1999 11.6607 19.1764 11.3268 19.131 11H20.945C20.9812 11.3283 20.9999 11.662 20.9999 12C20.9999 16.9706 16.9704 21 11.9999 21C7.02931 21 2.99988 16.9706 2.99988 12C2.99988 7.02944 7.02931 3 11.9999 3Z"
+            fill="currentColor"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.24/BulbFill.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const BulbFill: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12.5 2C7.99922 2 4.53849 6.03871 5.13333 10.5C5.43105 12.733 6.70446 14.6446 8.48871 15.8055C8.79612 16.0055 8.99999 16.3383 8.99999 16.7051V18H16V16.7051C16 16.3383 16.2039 16.0055 16.5113 15.8055C18.2955 14.6446 19.5689 12.733 19.8667 10.5C20.4615 6.03871 17.0008 2 12.5 2ZM11 22C9.89542 22 8.99999 21.1046 8.99999 20H16C16 21.1046 15.1046 22 14 22H11ZM13 4C12.4477 4 12 4.44772 12 5C12 5.55228 12.4477 6 13 6C13.394 6 13.7841 6.0776 14.1481 6.22836C14.512 6.37913 14.8427 6.6001 15.1213 6.87868C15.3999 7.15726 15.6209 7.48797 15.7716 7.85195C15.9224 8.21593 16 8.60603 16 9C16 9.55228 16.4477 10 17 10C17.5523 10 18 9.55228 18 9C18 8.34339 17.8707 7.69321 17.6194 7.08658C17.3681 6.47995 16.9998 5.92876 16.5355 5.46447C16.0712 5.00017 15.52 4.63188 14.9134 4.3806C14.3068 4.12933 13.6566 4 13 4Z"
+            fill="currentColor"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.24/DeviceTvFill.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const DeviceTvFill: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0 6.5C0 5.11929 1.11929 4 2.5 4H21.5C22.8807 4 24 5.11929 24 6.5V16.5C24 17.8807 22.8807 19 21.5 19H2.5C1.11929 19 0 17.8807 0 16.5V6.5ZM6 21C6 20.4477 6.33579 20 6.75 20H17.25C17.6642 20 18 20.4477 18 21C18 21.5523 17.6642 22 17.25 22H6.75C6.33579 22 6 21.5523 6 21ZM9.12 14.92C8.72 15.2 8.17 15.17 7.82 14.82C7.39 14.39 7.42 13.67 7.91 13.32C9.06 12.49 10.47 12 12 12C13.53 12 14.94 12.49 16.09 13.32C16.57 13.68 16.61 14.39 16.18 14.82C15.83 15.17 15.28 15.19 14.88 14.91C14.07 14.34 13.07 14 12 14C10.93 14 9.93 14.34 9.12 14.92ZM5.05 10.47C6.94 8.93 9.36 8 12 8C14.64 8 17.06 8.93 18.94 10.48C19.4 10.86 19.44 11.55 19.02 11.97C18.66 12.33 18.09 12.36 17.7 12.04C16.16 10.77 14.17 10 12 10C9.83 10 7.84 10.77 6.29 12.03C5.9 12.35 5.33 12.32 4.97 11.96C4.55 11.54 4.59 10.85 5.05 10.47Z"
+            fill="currentColor"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.24/DisplayFrontOutline.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const DisplayFrontOutline: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M4 4C2.34315 4 1 5.36261 1 7.04348V15.9565C1 17.6374 2.34315 19 4 19H6V19.5C6 20.3284 6.67157 21 7.5 21H16.5C17.3284 21 18 20.3284 18 19.5V19H20C21.6569 19 23 17.6374 23 15.9565V7.04348C23 5.36261 21.6569 4 20 4H4ZM3 7.04348C3 6.43995 3.47475 6 4 6H20C20.5253 6 21 6.43995 21 7.04348V15.9565C21 16.56 20.5253 17 20 17H4C3.47475 17 3 16.56 3 15.9565V7.04348Z"
+            fill="currentColor"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.24/ListView.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const ListView: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M4 9C4.55228 9 5 8.55228 5 8C5 7.44772 4.55228 7 4 7C3.44772 7 3 7.44772 3 8C3 8.55228 3.44772 9 4 9ZM4 13C4.55228 13 5 12.5523 5 12C5 11.4477 4.55228 11 4 11C3.44772 11 3 11.4477 3 12C3 12.5523 3.44772 13 4 13ZM5 16C5 16.5523 4.55228 17 4 17C3.44772 17 3 16.5523 3 16C3 15.4477 3.44772 15 4 15C4.55228 15 5 15.4477 5 16ZM8 7.25C7.58579 7.25 7.25 7.58579 7.25 8C7.25 8.41421 7.58579 8.75 8 8.75H20.25C20.6642 8.75 21 8.41421 21 8C21 7.58579 20.6642 7.25 20.25 7.25H8ZM7.25 12C7.25 11.5858 7.58579 11.25 8 11.25H20.25C20.6642 11.25 21 11.5858 21 12C21 12.4142 20.6642 12.75 20.25 12.75H8C7.58579 12.75 7.25 12.4142 7.25 12ZM8 15.25C7.58579 15.25 7.25 15.5858 7.25 16C7.25 16.4142 7.58579 16.75 8 16.75H20.25C20.6642 16.75 21 16.4142 21 16C21 15.5858 20.6642 15.25 20.25 15.25H8Z"
+            fill="currentColor"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.24/NetworkOutline.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const NetworkOutline: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M17.7935 4.0004C18.1613 3.99097 18.5127 4.14827 18.75 4.43161C20.1537 6.01554 20.9999 8.1081 20.9999 10.3922C20.9999 12.6654 20.1462 14.7485 18.75 16.3344C18.4805 16.7001 18.0303 16.8803 17.5826 16.8053C17.1373 16.7304 16.772 16.4093 16.638 15.9786C16.5025 15.5449 16.6241 15.074 16.9497 14.7599C17.9762 13.5928 18.5996 12.0699 18.5996 10.3922C18.5996 8.70307 17.9786 7.18712 16.9497 6.02497C16.6454 5.69697 16.5467 5.22805 16.6966 4.80626C16.8465 4.38447 17.2192 4.08029 17.6625 4.01926C17.7047 4.01025 17.7451 4.00577 17.7875 4.00106L17.7935 4.0004ZM5.39987 10.3924C5.39987 8.71965 6.00939 7.20816 7.03138 6.04354C7.36642 5.67832 7.44137 5.14389 7.22099 4.70126C7.00259 4.25566 6.53205 3.99316 6.03718 4.03782C5.72547 4.06412 5.43511 4.21348 5.23111 4.45018C3.84132 6.03411 3 8.12666 3 10.3924C3 12.7003 3.87408 14.8187 5.30655 16.4096C5.75128 16.9018 6.5107 16.939 7.00259 16.4939C7.49547 16.0488 7.5327 15.2896 7.08747 14.7973C6.03718 13.6307 5.39987 12.1004 5.39987 10.3924ZM11.9998 7.3933C10.3449 7.3933 8.99981 8.73806 8.99981 10.3925C8.99981 11.6876 9.82624 12.7902 10.9783 13.209V19.4117C10.9783 19.9754 11.4354 20.4329 11.9998 20.4329C12.5641 20.4329 13.0213 19.9754 13.0213 19.4117V13.209C14.1733 12.7902 14.9997 11.6876 14.9997 10.3925C14.9997 8.73806 13.6546 7.3933 11.9998 7.3933Z"
+            fill="currentColor"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.24/NextFill.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const NextFill: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            d="M19 5C19.5523 5 20 5.44772 20 6V18C20 18.5523 19.5523 19 19 19C18.4477 19 18 18.5523 18 18V6C18 5.44772 18.4477 5 19 5Z"
+            fill="currentColor"
+        />
+        <path
+            d="M15.1709 10.7034C16.1653 11.2818 16.1654 12.7182 15.1709 13.2966L6.25415 18.4831C5.25416 19.0647 3.99997 18.3433 3.99997 17.1865V6.81354C3.99997 5.65669 5.25416 4.93527 6.25415 5.51692L15.1709 10.7034Z"
+            fill="currentColor"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.24/Ok.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const Ok: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            d="M7.00397 17.1441C9.72797 17.1321 11.6 15.4041 11.6 12.8121C11.6 10.0401 9.69197 8.45605 6.99197 8.45605C4.25597 8.45605 2.38397 10.1961 2.38397 12.7881C2.38397 15.5721 4.29197 17.1441 7.00397 17.1441ZM4.42397 12.8001C4.42397 11.2881 5.38397 10.2681 6.97997 10.2561C8.69597 10.2681 9.55997 11.4081 9.55997 12.8001C9.55997 14.3241 8.58797 15.3441 7.00397 15.3441C5.28797 15.3321 4.42397 14.1921 4.42397 12.8001Z"
+            fill="currentColor"
+        />
+        <path
+            d="M14.9003 13.5801H16.1123L18.6083 17.0001H21.0323L17.6603 12.5361L20.4683 8.60005H18.1883L16.0043 11.9361H14.9003V8.60005H12.9803V17.0001H14.9003V13.5801Z"
+            fill="currentColor"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.24/Open.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const Open: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <rect
+            x="3.8"
+            y="3.8"
+            width="16.4"
+            height="16.4"
+            rx="2.2"
+            stroke="white"
+            strokeOpacity="0.96"
+            strokeWidth="1.6"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8.34375 8.625C8.34375 8.15901 8.72151 7.78125 9.1875 7.78125H15.375C15.841 7.78125 16.2188 8.15901 16.2188 8.625V14.8125C16.2188 15.2785 15.841 15.6562 15.375 15.6562C14.909 15.6562 14.5312 15.2785 14.5312 14.8125V10.662L9.22162 15.9716C8.89212 16.3011 8.35788 16.3011 8.02838 15.9716C7.69887 15.6421 7.69887 15.1079 8.02838 14.7784L13.338 9.46875H9.1875C8.72151 9.46875 8.34375 9.09099 8.34375 8.625Z"
+            fill="currentColor"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.24/OrderFill.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const OrderFill: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M20 23C20.5517 23 21 22.5517 21 22V2C21 1.44828 20.5517 1 20 1H4C3.44828 1 3 1.44828 3 2V22C3 22.5517 3.44828 23 4 23H20ZM7 7.0273H17C17.5523 7.0273 18 6.57958 18 6.0273C18 5.47502 17.5523 5.0273 17 5.0273H7C6.44772 5.0273 6 5.47502 6 6.0273C6 6.57958 6.44772 7.0273 7 7.0273ZM7 12.0273H17C17.5523 12.0273 18 11.5796 18 11.0273C18 10.475 17.5523 10.0273 17 10.0273H7C6.44772 10.0273 6 10.475 6 11.0273C6 11.5796 6.44772 12.0273 7 12.0273ZM7 17.0273H12C12.5523 17.0273 13 16.5796 13 16.0273C13 15.475 12.5523 15.0273 12 15.0273H7C6.44772 15.0273 6 15.475 6 16.0273C6 16.5796 6.44772 17.0273 7 17.0273Z"
+            fill="currentColor"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.24/PauseOutline.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const PauseOutline: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8.5 4C7.67157 4 7 4.67157 7 5.5V18.5C7 19.3284 7.67157 20 8.5 20C9.32843 20 10 19.3284 10 18.5V5.5C10 4.67157 9.32843 4 8.5 4ZM15.5 4C14.6716 4 14 4.67157 14 5.5V18.5C14 19.3284 14.6716 20 15.5 20C16.3284 20 17 19.3284 17 18.5V5.5C17 4.67157 16.3284 4 15.5 4Z"
+            fill="currentColor"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.24/PersonFill.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const PersonFill: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8.25 7.72175C8.25 9.8085 9.92893 11.5 12 11.5C14.0711 11.5 15.75 9.8085 15.75 7.72175V6.77825C15.75 4.6915 14.0711 3 12 3C9.92893 3 8.25 4.6915 8.25 6.77825V7.72175ZM4 17.5C4 14.84 9.33 13.5 12 13.5C14.67 13.5 20 14.84 20 17.5V19.5C20 20.6046 19.1046 21.5 18 21.5H6C4.89543 21.5 4 20.6046 4 19.5V17.5Z"
+            fill="currentColor"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.24/PictureOutline.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const PictureOutline: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M17.68 5H6.32C5.68145 5 5.29065 5.00084 4.99573 5.01857C4.71595 5.03538 4.65274 5.06219 4.66126 5.05912C4.38085 5.16008 4.16008 5.38085 4.05912 5.66126C4.06219 5.65274 4.03538 5.71595 4.01857 5.99573C4.00084 6.29065 4 6.68145 4 7.32V15.5857L6.93929 12.6464C7.52508 12.0606 8.47483 12.0606 9.06061 12.6464L11 14.5857L14.9393 10.6464C15.5251 10.0606 16.4748 10.0606 17.0606 10.6464L20 13.5858V7.32C20 6.68145 19.9992 6.29065 19.9814 5.99573C19.9646 5.71595 19.9378 5.65274 19.9409 5.66126C19.8399 5.38085 19.6192 5.16008 19.3387 5.05912L19.3387 5.0591C19.3307 5.0564 19.2532 5.03353 19.0043 5.01857C18.7093 5.00084 18.3185 5 17.68 5ZM9.58574 15.9999L7.99995 14.4141L4.06348 18.3506C4.16634 18.6254 4.38482 18.8414 4.66126 18.9409L4.66055 18.9406C4.66046 18.9406 4.66068 18.9407 4.66125 18.9409C4.66931 18.9436 4.7468 18.9665 4.99573 18.9814C5.29065 18.9992 5.68145 19 6.32 19H6.58566L9.58574 15.9999ZM17.68 19H9.41409L16 12.4141L20 16.4142V16.68C20 17.3185 19.9992 17.7093 19.9814 18.0043C19.9665 18.2532 19.9436 18.3307 19.9409 18.3387L19.9409 18.3387C19.8399 18.6192 19.6192 18.8399 19.3387 18.9409C19.3473 18.9378 19.2841 18.9646 19.0043 18.9814C18.7093 18.9992 18.3185 19 17.68 19ZM2.17736 4.98379C2 5.47642 2 6.09094 2 7.32V16.68C2 17.9091 2 18.5236 2.17736 19.0162C2.48023 19.8575 3.14254 20.5198 3.98379 20.8226C4.47642 21 5.09094 21 6.32 21H17.68C18.9091 21 19.5236 21 20.0162 20.8226C20.8575 20.5198 21.5198 19.8575 21.8226 19.0162C22 18.5236 22 17.9091 22 16.68V7.32C22 6.09094 22 5.47642 21.8226 4.98379C21.5198 4.14254 20.8575 3.48023 20.0162 3.17736C19.5236 3 18.9091 3 17.68 3H6.32C5.09094 3 4.47642 3 3.98379 3.17736C3.14254 3.48023 2.48023 4.14254 2.17736 4.98379Z"
+            fill="currentColor"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.24/Pin.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const Pin: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M13 16H11V21L12 22L13 21V16Z" fill="currentColor" />
+        <path
+            d="M16.8748 11.1256C17.4366 11.6901 18.1995 12.0086 18.996 12.011L20 12V14H5H4V12H5C5.39396 12.0007 5.78417 11.9235 6.14823 11.7729C6.51228 11.6223 6.84299 11.4013 7.12138 11.1226C7.39977 10.8438 7.62034 10.5128 7.77044 10.1485C7.92053 9.78428 7.99719 9.39396 7.996 9L8 4H6.997C6.73178 3.99961 6.47759 3.89387 6.29033 3.70605C6.10308 3.51823 5.9981 3.26372 5.9985 2.9985C5.9989 2.73329 6.10464 2.47909 6.29245 2.29184C6.38545 2.19912 6.4958 2.12562 6.6172 2.07555C6.7386 2.02548 6.86868 1.99981 7 2H17L16.985 2.012C17.2502 2.00985 17.5055 2.1124 17.6956 2.29738C17.8856 2.48236 17.995 2.73485 18 3C17.9969 3.26751 17.8891 3.52315 17.6997 3.71214C17.5104 3.90112 17.2545 4.00841 16.987 4.011L17 4H16V9C15.9984 9.79646 16.3131 10.561 16.8748 11.1256Z"
+            fill="currentColor"
+        />
+    </svg>
+);

packages/plasma-icons/src/scalable/Icon.assets.24/Pip.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { IconProps } from '../IconRoot';
+
+export const Pip: React.FC<IconProps> = (props) => (
+    <svg width="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            d="M19.1213 3.87868C18.5587 3.31607 17.7956 3 17 3H12C11.4477 3 11 3.44772 11 4C11 4.55228 11.4477 5 12 5H17C17.2652 5 17.5196 5.10536 17.7071 5.29289C17.8946 5.48043 18 5.73478 18 6V10H20V6C20 5.20435 19.6839 4.44129 19.1213 3.87868Z"
+            fill="currentColor"
+        />
+        <path
+            d="M5 16C4.73478 16 4.48043 15.8946 4.29289 15.7071C4.10536 15.5196 4 15.2652 4 15V13C4 12.4477 3.55228 12 3 12C2.44772 12 2 12.4477 2 13V15C2 15.7957 2.31607 16.5587 2.87868 17.1213C3.44129 17.6839 4.20435 18 5 18H8V16H5Z"
+            fill="currentColor"
+        />
+        <path
+            d="M8.92412 9.38278C8.87568 9.49986 8.80405 9.6096 8.70922 9.70498L8.70498 9.70922C8.52419 9.88894 8.27506 10 8 10H4C3.44772 10 3 9.55228 3 9C3 8.44772 3.44772 8 4 8H5.58579L2.29289 4.70711C1.90237 4.31658 1.90237 3.68342 2.29289 3.29289C2.68342 2.90237 3.31658 2.90237 3.70711 3.29289L7 6.58579V5C7 4.44772 7.44772 4 8 4C8.55229 4 9 4.44772 9 5V8.99931L9 9.003C8.99961 9.13226 8.97432 9.26146 8.92412 9.38278Z"
+            fill="currentColor"
+        />
+        <path
+            d="M12 12C10.8954 12 10 12.8954 10 14V18C10 19.1046 10.8954 20 12 20H20C21.1046 20 22 19.1046 22 18V14C22 12.8954 21.1046 12 20 12H12Z"
+            fill="currentColor"
+        />
+    </svg>
+);