@syscore/ui-library 1.1.10 → 1.1.11

package/client/components/icons/ConceptIcons.tsx

@@ -0,0 +1,667 @@
+import React from "react";
+import { cn } from "../../lib/utils";
+
+// Concept icons matching the WELL Building Standard Figma design
+// Each icon represents a different concept with active/inactive states
+
+interface ConceptIconProps {
+  className?: string;
+  active?: boolean;
+}
+
+const CIRCLE_BG_PATH =
+  "M24 48C21.931 48 19.7793 47.7517 17.7931 47.1724C15.8069 46.5931 13.8207 45.8483 12 44.7724C10.1793 43.6966 8.52414 42.4552 7.03448 40.9655C5.54483 39.4759 4.30345 37.8207 3.22759 36C2.15172 34.1793 1.4069 32.2759 0.827586 30.2069C0.248276 28.2207 0 26.069 0 24C0 21.931 0.248276 19.7793 0.827586 17.7931C1.4069 15.8069 2.15172 13.8207 3.22759 12C4.30345 10.1793 5.54483 8.52414 7.03448 7.03448C8.52414 5.54483 10.1793 4.30345 12 3.22759C13.8207 2.15172 15.7241 1.4069 17.7931 0.827586C19.7793 0.248276 21.931 0 24 0C26.069 0 28.2207 0.248276 30.2069 0.827586C32.1931 1.4069 34.1793 2.15172 36 3.22759C37.8207 4.30345 39.4759 5.54483 40.9655 7.03448C42.4552 8.52414 43.6966 10.1793 44.7724 12C45.8483 13.8207 46.5931 15.7241 47.1724 17.7931C47.7517 19.7793 48 21.931 48 24C48 26.069 47.7517 28.2207 47.1724 30.2069C46.5931 32.1931 45.8483 34.1793 44.7724 36C43.6966 37.8207 42.4552 39.4759 40.9655 40.9655C39.4759 42.4552 37.8207 43.6966 36 44.7724C34.1793 45.8483 32.2759 46.5931 30.2069 47.1724C28.2207 47.7517 26.069 48 24 48Z";
+
+export const IconConceptMind: React.FC<ConceptIconProps> = ({
+  className,
+  active = true,
+}) => {
+  const bgFill = active ? "#0A5161" : "#EFF5FB";
+  const strokeColor = active ? "white" : "#2E74AD";
+
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("size-12", className)}
+    >
+      <path id="bg" d={CIRCLE_BG_PATH} fill={bgFill} />
+      <g id="icon_2">
+        <path
+          id="vector"
+          d="M23.9982 15.6098C23.9996 15.1299 23.9051 14.6546 23.7201 14.2119C23.5352 13.7691 23.2635 13.3678 22.9212 13.0315C22.5789 12.6952 22.1727 12.4308 21.7267 12.2538C21.2807 12.0768 20.8038 11.9908 20.3241 12.0008C19.8443 12.0108 19.3714 12.1166 18.9331 12.3121C18.4949 12.5075 18.1002 12.7886 17.7721 13.1388C17.4441 13.4891 17.1894 13.9014 17.0231 14.3515C16.8567 14.8016 16.7821 15.2804 16.8035 15.7597C16.0983 15.9411 15.4436 16.2805 14.889 16.7523C14.3344 17.2241 13.8944 17.8159 13.6024 18.4829C13.3104 19.15 13.174 19.8747 13.2036 20.6022C13.2331 21.3298 13.4278 22.041 13.773 22.6822C13.1661 23.1752 12.6889 23.809 12.3829 24.5285C12.0769 25.2479 11.9512 26.0313 12.017 26.8104C12.0828 27.5895 12.3379 28.3407 12.7602 28.9988C13.1825 29.6568 13.7591 30.2016 14.44 30.586C14.3559 31.2365 14.4061 31.8974 14.5874 32.5277C14.7688 33.1581 15.0774 33.7446 15.4943 34.2511C15.9112 34.7575 16.4275 35.1731 17.0113 35.4722C17.5951 35.7712 18.234 35.9475 18.8886 35.9899C19.5431 36.0324 20.1995 35.9402 20.817 35.7191C21.4346 35.498 22.0002 35.1526 22.4791 34.7043C22.9579 34.256 23.3398 33.7143 23.6011 33.1127C23.8624 32.511 23.9975 31.8622 23.9982 31.2062V15.6098Z"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_2"
+          d="M23.9982 15.6098C23.9967 15.1299 24.0913 14.6546 24.2763 14.2119C24.4612 13.7691 24.7329 13.3678 25.0752 13.0315C25.4175 12.6952 25.8236 12.4308 26.2696 12.2538C26.7157 12.0768 27.1926 11.9908 27.6723 12.0008C28.1521 12.0108 28.625 12.1166 29.0632 12.3121C29.5015 12.5075 29.8962 12.7886 30.2242 13.1388C30.5523 13.4891 30.8069 13.9014 30.9733 14.3515C31.1397 14.8016 31.2143 15.2804 31.1929 15.7597C31.8981 15.9411 32.5528 16.2805 33.1074 16.7523C33.662 17.2241 34.102 17.8159 34.394 18.4829C34.686 19.15 34.8224 19.8747 34.7928 20.6022C34.7633 21.3298 34.5686 22.041 34.2234 22.6822C34.8303 23.1752 35.3075 23.809 35.6135 24.5285C35.9195 25.2479 36.0451 26.0313 35.9794 26.8104C35.9136 27.5895 35.6585 28.3407 35.2362 28.9988C34.8139 29.6568 34.2373 30.2016 33.5564 30.586C33.6404 31.2365 33.5903 31.8974 33.4089 32.5277C33.2276 33.1581 32.919 33.7446 32.5021 34.2511C32.0852 34.7575 31.5689 35.1731 30.9851 35.4722C30.4013 35.7712 29.7624 35.9475 29.1078 35.9899C28.4532 36.0324 27.7969 35.9402 27.1794 35.7191C26.5618 35.498 25.9961 35.1526 25.5173 34.7043C25.0384 34.256 24.6566 33.7143 24.3953 33.1127C24.134 32.511 23.9989 31.8622 23.9982 31.2062V15.6098Z"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_3"
+          d="M27.5973 25.2076C26.5901 24.8533 25.7105 24.2082 25.0699 23.354C24.4292 22.4998 24.0563 21.4749 23.9981 20.4087C23.94 21.4749 23.567 22.4998 22.9264 23.354C22.2857 24.2082 21.4062 24.8533 20.399 25.2076"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_4"
+          d="M30.7155 17.4094C31.0059 16.9062 31.1701 16.3402 31.1942 15.7598"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_5"
+          d="M16.8033 15.7598C16.827 16.3401 16.9908 16.9061 17.2808 17.4094"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_6"
+          d="M13.7729 22.6834C13.9924 22.5046 14.2273 22.3456 14.4748 22.2083"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_7"
+          d="M33.5215 22.2083C33.769 22.3456 34.0039 22.5046 34.2234 22.6834"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_8"
+          d="M16.7997 31.2062C15.9729 31.2066 15.16 30.9934 14.4399 30.5872"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_9"
+          d="M33.5564 30.5872C32.8362 30.9934 32.0233 31.2066 31.1965 31.2062"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const IconConceptCommunity: React.FC<ConceptIconProps> = ({
+  className,
+  active = true,
+}) => {
+  const bgFill = active ? "#0F748A" : "#EFF5FB";
+  const strokeColor = active ? "white" : "#2E74AD";
+
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("size-12", className)}
+    >
+      <path id="bg" d={CIRCLE_BG_PATH} fill={bgFill} />
+      <g id="icon_2">
+        <path
+          id="vector"
+          d="M32.4 28.2C34.188 26.448 36 24.348 36 21.6C36 19.8496 35.3046 18.1708 34.0669 16.9331C32.8292 15.6954 31.1504 15 29.4 15C27.288 15 25.8 15.6 24 17.4C22.2 15.6 20.712 15 18.6 15C16.8496 15 15.1708 15.6954 13.9331 16.9331C12.6954 18.1708 12 19.8496 12 21.6C12 24.36 13.8 26.46 15.6 28.2L24 36.6L32.4 28.2Z"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_2"
+          d="M24.0001 17.4L20.4481 20.952C20.2043 21.194 20.0108 21.4819 19.8787 21.7991C19.7467 22.1163 19.6787 22.4564 19.6787 22.8C19.6787 23.1436 19.7467 23.4837 19.8787 23.8009C20.0108 24.1181 20.2043 24.406 20.4481 24.648C21.4321 25.632 23.0041 25.668 24.0481 24.732L26.5321 22.452C27.1547 21.887 27.9654 21.5741 28.8061 21.5741C29.6469 21.5741 30.4575 21.887 31.0801 22.452L34.6321 25.644"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_3"
+          d="M31.2 29.4L28.8 27"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_4"
+          d="M27.6 33L25.2 30.6"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const IconConceptMovement: React.FC<ConceptIconProps> = ({
+  className,
+  active = true,
+}) => {
+  const bgFill = active ? "#149EBD" : "#EFF5FB";
+  const strokeColor = active ? "white" : "#2E74AD";
+
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("size-12", className)}
+    >
+      <path id="bg" d={CIRCLE_BG_PATH} fill={bgFill} />
+      <g id="icon_2">
+        <path
+          id="vector"
+          d="M35 24H32.272C31.7913 23.999 31.3234 24.1554 30.94 24.4455C30.5566 24.7355 30.2788 25.1431 30.149 25.606L27.564 34.802C27.5473 34.8591 27.5126 34.9093 27.465 34.945C27.4174 34.9807 27.3595 35 27.3 35C27.2405 35 27.1826 34.9807 27.135 34.945C27.0874 34.9093 27.0527 34.8591 27.036 34.802L20.964 13.198C20.9473 13.1409 20.9126 13.0907 20.865 13.055C20.8174 13.0193 20.7595 13 20.7 13C20.6405 13 20.5826 13.0193 20.535 13.055C20.4874 13.0907 20.4527 13.1409 20.436 13.198L17.851 22.394C17.7217 22.8551 17.4455 23.2614 17.0644 23.5512C16.6832 23.8411 16.2179 23.9986 15.739 24H13"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const IconConceptWater: React.FC<ConceptIconProps> = ({
+  className,
+  active = true,
+}) => {
+  const bgFill = active ? "#39C9EA" : "#EFF5FB";
+  const strokeColor = active ? "white" : "#2E74AD";
+
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("size-12", className)}
+    >
+      <path id="bg" d={CIRCLE_BG_PATH} fill={bgFill} />
+      <g id="icon_2">
+        <path
+          id="vector"
+          d="M16.0063 15.7783C15.9894 15.617 16.0066 15.454 16.0568 15.2998C16.1069 15.1456 16.1889 15.0036 16.2974 14.8831C16.4059 14.7626 16.5385 14.6662 16.6866 14.6002C16.8347 14.5342 16.9951 14.5001 17.1572 14.5H30.7972C30.9595 14.5001 31.1199 14.5343 31.2681 14.6003C31.4163 14.6664 31.549 14.7629 31.6575 14.8835C31.766 15.0042 31.848 15.1463 31.898 15.3006C31.9481 15.455 31.9652 15.6181 31.9481 15.7795L29.9867 34.4273C29.9266 34.9965 29.6579 35.5232 29.2324 35.9059C28.8069 36.2886 28.2548 36.5003 27.6825 36.5H20.272C19.6977 36.5031 19.1427 36.2928 18.7148 35.9098C18.2868 35.5268 18.0165 34.9985 17.9562 34.4273L16.0063 15.7783Z"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_2"
+          d="M17.0299 24.9216C18.032 24.17 19.2509 23.7637 20.5036 23.7637C21.7562 23.7637 22.9751 24.17 23.9772 24.9216C24.9794 25.6732 26.1982 26.0795 27.4509 26.0795C28.7036 26.0795 29.9225 25.6732 30.9246 24.9216"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const IconConceptAir: React.FC<ConceptIconProps> = ({
+  className,
+  active = true,
+}) => {
+  const bgFill = active ? "#87DFF2" : "#EFF5FB";
+  const strokeColor = active ? "white" : "#2E74AD";
+
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("size-12", className)}
+    >
+      <path id="bg" d={CIRCLE_BG_PATH} fill={bgFill} />
+      <g id="icon_2">
+        <path
+          id="vector"
+          d="M25.96 32.72C26.2642 32.9482 26.6183 33.1008 26.9931 33.1653C27.3679 33.2297 27.7526 33.2042 28.1156 33.0908C28.4786 32.9774 28.8094 32.7794 29.0809 32.5131C29.3523 32.2467 29.5566 31.9197 29.6768 31.5589C29.7971 31.1982 29.8299 30.814 29.7726 30.4381C29.7152 30.0621 29.5693 29.7052 29.347 29.3967C29.1246 29.0882 28.8321 28.8369 28.4936 28.6637C28.1551 28.4904 27.7803 28.4 27.4 28.4H13"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_2"
+          d="M31.6 18.8C31.9068 18.3909 32.3131 18.067 32.7803 17.8591C33.2475 17.6512 33.7601 17.5662 34.2694 17.6121C34.7787 17.658 35.2678 17.8334 35.6903 18.1215C36.1128 18.4096 36.4546 18.801 36.6833 19.2584C36.912 19.7157 37.02 20.224 36.997 20.7348C36.974 21.2457 36.8208 21.7422 36.552 22.1772C36.2831 22.6122 35.9075 22.9712 35.4609 23.2203C35.0143 23.4693 34.5114 23.6 34 23.6H13"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_3"
+          d="M22.36 14.48C22.6642 14.2518 23.0183 14.0992 23.3931 14.0347C23.7679 13.9703 24.1526 13.9958 24.5156 14.1092C24.8786 14.2226 25.2094 14.4206 25.4809 14.6869C25.7523 14.9533 25.9566 15.2803 26.0768 15.6411C26.1971 16.0018 26.2299 16.386 26.1726 16.7619C26.1152 17.1379 25.9693 17.4948 25.747 17.8033C25.5246 18.1118 25.2321 18.3631 24.8936 18.5363C24.5551 18.7096 24.1803 18.8 23.8 18.8H13"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const IconConceptLight: React.FC<ConceptIconProps> = ({
+  className,
+  active = true,
+}) => {
+  const bgFill = active ? "#8AEFDB" : "#EFF5FB";
+  const strokeColor = active ? "white" : "#2E74AD";
+
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("size-12", className)}
+    >
+      <path id="bg" d={CIRCLE_BG_PATH} fill={bgFill} />
+      <g id="icon_2">
+        <path
+          id="vector"
+          d="M24 29.6005C27.0928 29.6005 29.6 27.0933 29.6 24.0005C29.6 20.9076 27.0928 18.4004 24 18.4004C20.9072 18.4004 18.4 20.9076 18.4 24.0005C18.4 27.0933 20.9072 29.6005 24 29.6005Z"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_2"
+          d="M24 10V12.8"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_3"
+          d="M24 35.2V38"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_4"
+          d="M14.102 14.1016L16.076 16.0757"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_5"
+          d="M31.924 31.9244L33.898 33.8984"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_6"
+          d="M10 24.0002H12.8"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_7"
+          d="M35.2 24.0002H38"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_8"
+          d="M16.076 31.9244L14.102 33.8984"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_9"
+          d="M33.898 14.1016L31.924 16.0757"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const IconConceptThermalComfort: React.FC<ConceptIconProps> = ({
+  className,
+  active = true,
+}) => {
+  const bgFill = active ? "#3EDDBF" : "#EFF5FB";
+  const strokeColor = active ? "white" : "#2E74AD";
+
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("size-12", className)}
+    >
+      <path id="bg" d={CIRCLE_BG_PATH} fill={bgFill} />
+      <g id="icon_2">
+        <path
+          id="vector"
+          d="M22.3994 35.4V34.1"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_2"
+          d="M22.3994 13.3V12"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_3"
+          d="M22.3998 19.8C21.3655 19.8 20.3735 20.2109 19.6422 20.9423C18.9108 21.6737 18.4999 22.6657 18.4999 23.7C18.4999 24.7343 18.9108 25.7263 19.6422 26.4577C20.3735 27.1891 21.3655 27.6 22.3998 27.6"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_4"
+          d="M27.6002 34.1L29.2251 30.85L32.8001 31.5"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_5"
+          d="M27.6002 13.3L29.2251 16.55L32.8001 15.9"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_6"
+          d="M31.5001 35.4L27.6002 27.6L29.5501 23.7H38"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_7"
+          d="M31.5001 12L27.6002 19.8L29.5501 23.7"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_8"
+          d="M12 23.7H13.3"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_9"
+          d="M35.3994 21.1L33.4494 23.7L35.3994 26.3"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_10"
+          d="M14.1317 31.968L15.0417 31.058"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_11"
+          d="M15.0417 16.342L14.1317 15.432"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const IconConceptNourishment: React.FC<ConceptIconProps> = ({
+  className,
+  active = true,
+}) => {
+  const bgFill = active ? "#17AA8D" : "#EFF5FB";
+  const strokeColor = active ? "white" : "#2E74AD";
+
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("size-12", className)}
+    >
+      <path id="bg" d={CIRCLE_BG_PATH} fill={bgFill} />
+      <g id="icon_2">
+        <path
+          id="vector"
+          d="M24 38C27.1826 38 30.2348 36.7357 32.4853 34.4853C34.7357 32.2349 36 29.1826 36 26H12C12 29.1826 13.2643 32.2349 15.5147 34.4853C17.7652 36.7357 20.8174 38 24 38Z"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_2"
+          d="M22.2049 25.9999C21.4536 26.0077 20.7274 25.6987 20.172 25.135C19.6166 24.5713 19.2731 23.7945 19.2103 22.9604C19.1475 22.1263 19.3701 21.2966 19.8335 20.6377C20.2968 19.9789 20.9667 19.5395 21.7087 19.4078C21.5899 18.8222 21.616 18.2116 21.7843 17.6412C21.9525 17.0708 22.2566 16.562 22.6641 16.169C23.0716 15.776 23.5672 15.5137 24.098 15.4099C24.6289 15.3061 25.175 15.3648 25.6783 15.5797C25.8986 15.1933 26.1884 14.8618 26.5294 14.6062C26.8704 14.3507 27.2552 14.1765 27.6595 14.0947C28.0639 14.0129 28.479 14.0253 28.8789 14.131C29.2788 14.2368 29.6546 14.4336 29.9829 14.7091C30.5554 14.2077 31.2731 13.9575 32.0001 14.0059C32.7271 14.0543 33.4129 14.3978 33.9279 14.9715C34.4428 15.5451 34.7512 16.3092 34.7946 17.1191C34.838 17.929 34.6134 18.7285 34.1634 19.3663C34.4435 19.7808 34.6324 20.2628 34.715 20.7734C34.7975 21.284 34.7714 21.8091 34.6386 22.3064C34.5059 22.8037 34.2703 23.2594 33.9508 23.6368C33.6313 24.0143 33.2367 24.303 32.7988 24.4797C32.912 24.9771 32.9247 25.4963 32.8361 25.9999"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_3"
+          d="M24 26L28.8 20"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_4"
+          d="M21.6 19.3614C21.0276 18.5441 20.2847 17.9768 19.4681 17.7333C18.6515 17.4898 17.7991 17.5815 17.022 17.9963C16.2448 18.4112 15.579 19.13 15.1113 20.059C14.6437 20.9881 14.3958 22.0843 14.4 23.2048C14.4 24.2251 14.6087 25.1755 14.9635 26"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const IconConceptSound: React.FC<ConceptIconProps> = ({
+  className,
+  active = true,
+}) => {
+  const bgFill = active ? "#0C705C" : "#EFF5FB";
+  const strokeColor = active ? "white" : "#2E74AD";
+
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("size-12", className)}
+    >
+      <path id="bg" d={CIRCLE_BG_PATH} fill={bgFill} />
+      <g id="icon_2">
+        <path
+          id="vector"
+          d="M12 21.4002V25.0002"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_2"
+          d="M16.8 16.5998V29.7998"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_3"
+          d="M21.6 13V34.6"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_4"
+          d="M26.4 19V27.4"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_5"
+          d="M31.2 15.4002V31.0002"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_6"
+          d="M36 21.4002V25.0002"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const IconConceptMaterials: React.FC<ConceptIconProps> = ({
+  className,
+  active = true,
+}) => {
+  const bgFill = active ? "#0A4F41" : "#EFF5FB";
+  const strokeColor = active ? "white" : "#2E74AD";
+
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("size-12", className)}
+    >
+      <path id="bg" d={CIRCLE_BG_PATH} fill={bgFill} />
+      <g id="icon_2">
+        <path
+          id="vector"
+          d="M23.7778 30.1111C23.7778 31.4077 23.2627 32.6512 22.3459 33.5681C21.429 34.4849 20.1855 35 18.8889 35C17.5923 35 16.3488 34.4849 15.4319 33.5681C14.5151 32.6512 14 31.4077 14 30.1111V15.4444C14 14.7961 14.2575 14.1744 14.716 13.716C15.1744 13.2575 15.7961 13 16.4444 13H21.3333C21.9816 13 22.6034 13.2575 23.0618 13.716C23.5202 14.1744 23.7778 14.7961 23.7778 15.4444V30.1111Z"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_2"
+          d="M30.7444 25.2222H33.5556C34.2039 25.2222 34.8256 25.4798 35.284 25.9382C35.7425 26.3966 36 27.0184 36 27.6667V32.5556C36 33.2039 35.7425 33.8256 35.284 34.284C34.8256 34.7425 34.2039 35 33.5556 35H18.8889"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_3"
+          d="M18.8889 30.1111H18.9011"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          id="vector_4"
+          d="M23.7778 19.1112L26.5889 16.3001C26.8618 16.0262 27.1862 15.809 27.5434 15.6609C27.9005 15.5128 28.2835 15.4368 28.6701 15.4373C29.0568 15.4377 29.4395 15.5146 29.7963 15.6635C30.1532 15.8124 30.477 16.0304 30.7493 16.3049L33.0667 18.6223C33.3485 18.8934 33.5733 19.2181 33.7278 19.5773C33.8823 19.9366 33.9634 20.3231 33.9664 20.7141C33.9694 21.1052 33.8941 21.4929 33.745 21.8544C33.596 22.216 33.3761 22.5441 33.0984 22.8194L22.4333 33.5334"
+          stroke={strokeColor}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  );
+};