@brightlocal/icons 0.1.0

package/src/flag/virgin-islands.tsx

@@ -0,0 +1,63 @@
+import type { SVGProps } from "react";
+
+/**
+ * VirginIslands icon from flag category
+ *
+ * @example
+ * <VirginIslands className="w-6 h-6" />
+ * <VirginIslands width={24} height={24} />
+ */
+export const VirginIslands = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="none"
+    height={24}
+    viewBox="0 0 24 24"
+    width={24}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_43_2862)">
+      <path
+        d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
+        fill="#FCFCFC"
+      />
+      <path
+        d="M14.0381 8.3834C14.0381 7.25784 13.1256 6.34537 12 6.34537C10.8744 6.34537 9.96191 7.25784 9.96191 8.3834H5.47827C5.47827 9.49157 6.44361 10.39 7.55179 10.39H7.48504C7.48504 11.4983 8.38335 12.3968 9.49171 12.3968C9.49171 13.378 10.1964 14.1934 11.1271 14.3676L11.1219 14.3794H12.8781L12.8729 14.3676C13.8036 14.1933 14.5083 13.378 14.5083 12.3968C15.6166 12.3968 16.515 11.4983 16.515 10.39H16.4481C17.5563 10.39 18.5217 9.49157 18.5217 8.3834H14.0381Z"
+        fill="#FFDA44"
+      />
+      <path
+        d="M11.1041 14.1714L9.84042 17.0244C10.5072 17.2954 11.2359 17.4461 12 17.4461C12.7642 17.4461 13.4929 17.2955 14.1596 17.0244L12.896 14.1714H11.1041Z"
+        fill="#FFDA44"
+      />
+      <path
+        d="M9.39133 9.38564V12.8962C9.39133 14.8929 12 15.5048 12 15.5048C12 15.5048 14.6087 14.8929 14.6087 12.8962V9.38564H9.39133Z"
+        fill="#F0F0F0"
+      />
+      <path
+        d="M2.90997 12.0845L4.32086 16.0306L5.71708 12.0845H6.78264L4.74705 17.3018H3.89462L1.84445 12.0845H2.90997Z"
+        fill="#338AF3"
+      />
+      <path
+        d="M19.3044 17.3018V12.0845H20.3184V17.3018H19.3044Z"
+        fill="#338AF3"
+      />
+      <path
+        d="M10.4348 10.5193V14.7734C10.7934 15.0373 11.1793 15.2189 11.4783 15.3351V10.5193H10.4348Z"
+        fill="#D80027"
+      />
+      <path
+        d="M13.5652 10.5193V14.7734C13.2065 15.0373 12.8207 15.2189 12.5217 15.3351V10.5193H13.5652Z"
+        fill="#D80027"
+      />
+      <path
+        d="M9.39133 9.38554H14.6087V11.041H9.39133V9.38554Z"
+        fill="#0052B4"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_43_2862">
+        <rect fill="white" height="24" width="24" />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/flag/wales.tsx

@@ -0,0 +1,39 @@
+import type { SVGProps } from "react";
+
+/**
+ * Wales icon from flag category
+ *
+ * @example
+ * <Wales className="w-6 h-6" />
+ * <Wales width={24} height={24} />
+ */
+export const Wales = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="none"
+    height={24}
+    viewBox="0 0 24 24"
+    width={24}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_43_2875)">
+      <path
+        d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
+        fill="#F0F0F0"
+      />
+      <path
+        d="M24 12C24 18.6274 18.6274 24 12 24C5.37262 24 0 18.6274 0 12"
+        fill="#496E2D"
+      />
+      <path
+        d="M20.7663 8.35046C20.3371 7.13344 19.1776 6.26091 17.8138 6.26091H15.1305C13.4016 6.26091 12 7.66247 12 9.39136C12 9.95621 12.1504 10.4991 12.4121 10.9566C11.4157 10.9484 10.4935 10.9635 9.91303 10.9566C9.91303 9.74925 9.91303 8.21129 9.91303 7.88949L10.0363 7.76621C10.5897 7.2128 10.4052 6.29049 10.4052 6.29049C10.4052 6.29049 9.48295 6.10603 8.92955 6.65944L8.28459 7.30439H7.5652C5.98036 7.30439 4.69566 8.58915 4.69566 10.1739H6.78262V12.5218C6.78262 12.8652 6.85186 13.1923 6.97697 13.4903L6.26086 14.087H5.21737V13.0435H4.17389V15.1305H8.86955V17.2174H7.82606V18.2609H9.91303V16.1739L10.8695 15.0261H13.1304L14.0869 16.1739V17.2174H13.0434V18.2609H17.2173V12.5217C17.2173 11.6573 17.9181 10.9565 18.7825 10.9565C18.8047 10.9565 18.8268 10.9573 18.8488 10.9582C18.8056 10.791 18.7825 10.6156 18.7825 10.4348C18.7826 9.31688 19.6617 8.40432 20.7663 8.35046ZM15.1305 17.2174V15.0261H15.2174L16.1739 16.1739V17.2174H15.1305Z"
+        fill="#D80027"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_43_2875">
+        <rect fill="white" height="24" width="24" />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/flag/yemen.tsx

@@ -0,0 +1,39 @@
+import type { SVGProps } from "react";
+
+/**
+ * Yemen icon from flag category
+ *
+ * @example
+ * <Yemen className="w-6 h-6" />
+ * <Yemen width={24} height={24} />
+ */
+export const Yemen = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="none"
+    height={24}
+    viewBox="0 0 24 24"
+    width={24}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_43_2879)">
+      <path
+        d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
+        fill="#F0F0F0"
+      />
+      <path
+        d="M12 24C17.1596 24 21.5581 20.7435 23.2536 16.1739H0.746399C2.44191 20.7435 6.84043 24 12 24Z"
+        fill="black"
+      />
+      <path
+        d="M12 0C6.84043 0 2.44191 3.2565 0.746399 7.82611H23.2537C21.5581 3.2565 17.1596 0 12 0Z"
+        fill="#D80027"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_43_2879">
+        <rect fill="white" height="24" width="24" />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/flag/zambia.tsx

@@ -0,0 +1,47 @@
+import type { SVGProps } from "react";
+
+/**
+ * Zambia icon from flag category
+ *
+ * @example
+ * <Zambia className="w-6 h-6" />
+ * <Zambia width={24} height={24} />
+ */
+export const Zambia = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="none"
+    height={24}
+    viewBox="0 0 24 24"
+    width={24}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_43_2883)">
+      <path
+        d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
+        fill="#496E2D"
+      />
+      <path
+        d="M16.6957 12H12V24C13.4027 24 14.7488 23.7585 16 23.3163L16.6957 12Z"
+        fill="#D80027"
+      />
+      <path
+        d="M19.9999 20.9434C22.4547 18.7462 24 15.5537 24 12H19.3043L19.9999 20.9434Z"
+        fill="#FF9811"
+      />
+      <path
+        d="M16 12V23.3163C17.4905 22.7894 18.8458 21.9766 20 20.9435V12H16Z"
+        fill="black"
+      />
+      <path
+        d="M22.1739 7.82614H19.0434C19.0434 7.24986 18.5762 6.78265 17.9999 6.78265C17.4236 6.78265 16.9564 7.24986 16.9564 7.82614H13.826C13.826 8.40247 14.328 8.86962 14.9042 8.86962H14.8695C14.8695 9.44595 15.3366 9.91311 15.913 9.91311C15.913 10.4894 16.3801 10.9566 16.9564 10.9566H19.0434C19.6197 10.9566 20.0869 10.4894 20.0869 9.91311C20.6632 9.91311 21.1304 9.44595 21.1304 8.86962H21.0956C21.6719 8.86958 22.1739 8.40242 22.1739 7.82614Z"
+        fill="#FF9811"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_43_2883">
+        <rect fill="white" height="24" width="24" />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/flag/zimbabwe.tsx

@@ -0,0 +1,71 @@
+import type { SVGProps } from "react";
+
+/**
+ * Zimbabwe icon from flag category
+ *
+ * @example
+ * <Zimbabwe className="w-6 h-6" />
+ * <Zimbabwe width={24} height={24} />
+ */
+export const Zimbabwe = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="none"
+    height={24}
+    viewBox="0 0 24 24"
+    width={24}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_43_2889)">
+      <path
+        d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
+        fill="#F0F0F0"
+      />
+      <path
+        d="M22.8514 6.87203C22.2418 5.58419 21.4097 4.42248 20.4047 3.436L12 2.6087L3.59531 3.43605C3.5685 3.46234 3.54234 3.48925 3.51581 3.51583L6.87206 6.87208L12 7.02869L22.8514 6.87203Z"
+        fill="#FFDA44"
+      />
+      <path
+        d="M3.51569 20.4843C3.55984 20.5285 3.6039 20.5727 3.64872 20.6162L12 21.3913L20.3512 20.6162C21.3666 19.6318 22.2088 18.47 22.8271 17.1802L7.30431 16.6957C5.9687 18.0313 4.4282 19.5717 3.51569 20.4843Z"
+        fill="#FFDA44"
+      />
+      <path
+        d="M23.8807 10.308L9.91302 9.91302L12 12C11.3819 12.6181 10.4591 13.5409 9.91302 14.087L23.8733 13.7441C23.9563 13.1746 24 12.5924 24 12C24 11.4256 23.9587 10.8609 23.8807 10.308Z"
+        fill="black"
+      />
+      <path
+        d="M12 0C8.72684 0 5.76031 1.31109 3.59534 3.43603H20.4047C18.2397 1.31109 15.2732 0 12 0Z"
+        fill="#6DA544"
+      />
+      <path
+        d="M10.308 10.308H23.8806C23.7094 9.09496 23.3571 7.94024 22.8514 6.87201H6.87201L10.308 10.308Z"
+        fill="#D80027"
+      />
+      <path
+        d="M6.81982 17.1802H22.8271C23.3387 16.1127 23.6966 14.9579 23.8734 13.7441H10.2559C8.92521 15.0748 7.7975 16.2025 6.81982 17.1802Z"
+        fill="#D80027"
+      />
+      <path
+        d="M12 24C15.2463 24 18.191 22.7104 20.3512 20.6161H3.6488C5.80899 22.7104 8.75368 24 12 24Z"
+        fill="#6DA544"
+      />
+      <path
+        d="M4.2851 2.80939C4.01833 3.03354 3.76094 3.26853 3.51471 3.51467L12 12L3.51471 20.4853C3.7609 20.7315 4.01833 20.9664 4.2851 21.1906L13.4757 12L4.2851 2.80939Z"
+        fill="black"
+      />
+      <path
+        d="M4.82461 8.86957L5.60156 11.2609H8.11617L6.08189 12.739L6.85889 15.1305L4.82461 13.6525L2.79028 15.1305L3.56738 12.739L1.53314 11.2609H4.04761L4.82461 8.86957Z"
+        fill="#D80027"
+      />
+      <path
+        d="M6.96184 12.1956L4.93694 11.4783C4.93694 11.4783 4.78731 10.0747 4.77827 10.0271C4.70955 9.66509 4.39141 9.3913 4.00937 9.3913C3.57719 9.3913 3.22675 9.74169 3.22675 10.1739C3.22675 10.2456 3.2372 10.3146 3.25525 10.3806L2.6875 10.9522H3.697C3.697 12 2.91512 12 2.91512 13.0435L3.34886 14.087H5.95755L6.39236 13.0435H6.39217C6.43572 12.9433 6.46216 12.8401 6.47308 12.7369C6.84789 12.5853 6.96184 12.1956 6.96184 12.1956Z"
+        fill="#FFDA44"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_43_2889">
+        <rect fill="white" height="24" width="24" />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/icons/dynamic-icon-imports.ts

@@ -0,0 +1,36 @@
+import dynamicIconImports from "lucide-react/dynamicIconImports";
+
+/**
+ * Props that icon components accept (Lucide icons and custom icons)
+ */
+export interface IconComponentProps extends React.SVGProps<SVGSVGElement> {
+  size?: string | number;
+  absoluteStrokeWidth?: boolean;
+  strokeWidth?: string | number;
+}
+
+/**
+ * Custom icon dynamic imports
+ */
+const customIconImports = {} as const;
+
+/**
+ * Extended dynamic icon imports that includes both Lucide icons and custom BrightLocal icons.
+ * This allows you to use icon names from a database/CMS with dynamic imports for optimal bundle splitting.
+ *
+ * @example
+ * import { DynamicIcon, iconImports } from "@brightlocal/icons";
+ * <DynamicIcon name="camera" size={24} />
+ * <DynamicIcon name="bright-local-logo" size={24} />
+ */
+export const iconImports: Record<
+  string,
+  () => Promise<{ default: React.ComponentType<IconComponentProps> }>
+> = {
+  ...dynamicIconImports,
+  ...customIconImports,
+};
+
+export type IconImportName =
+  | keyof typeof dynamicIconImports
+  | keyof typeof customIconImports;

package/src/icons/dynamic-icon.tsx

@@ -0,0 +1,87 @@
+import * as React from "react";
+import {
+  iconImports,
+  type IconImportName,
+  type IconComponentProps,
+} from "./dynamic-icon-imports.js";
+
+export interface DynamicIconProps extends React.ComponentProps<"svg"> {
+  /**
+   * The name of the icon to render (kebab-case)
+   * Can be any Lucide icon name or custom icon name
+   *
+   * @example "camera" | "chevron-down" | "bright-local-logo"
+   */
+  name: IconImportName | string;
+  /**
+   * Icon size in pixels (applies to both width and height)
+   * @default 24
+   */
+  size?: number;
+  /**
+   * Icon color (uses currentColor by default)
+   */
+  color?: string;
+  /**
+   * Stroke width for line icons
+   * @default 2
+   */
+  strokeWidth?: number;
+}
+
+/**
+ * DynamicIcon component for rendering icons by name at runtime.
+ *
+ * This component is useful when icon names come from a database or API.
+ * It uses dynamic imports for optimal bundle splitting - icons are only loaded when used.
+ *
+ * Supports all Lucide icons plus custom BrightLocal icons.
+ *
+ * @example
+ * // Lucide icon
+ * <DynamicIcon name="camera" size={24} color="red" />
+ *
+ * @example
+ * // Custom BrightLocal icon
+ * <DynamicIcon name="bright-local-logo" size={32} />
+ *
+ * @example
+ * // From database
+ * const iconName = user.settings.preferredIcon; // "heart"
+ * <DynamicIcon name={iconName} size={20} />
+ *
+ * @example
+ * // With fallback using React.Suspense
+ * <React.Suspense fallback={<div className="w-6 h-6 animate-pulse bg-gray-200 rounded" />}>
+ *   <DynamicIcon name={dbIconName} size={24} />
+ * </React.Suspense>
+ */
+export const DynamicIcon = React.forwardRef<SVGSVGElement, DynamicIconProps>(
+  ({ name, size = 24, ...props }, ref) => {
+    const loader = iconImports[name as IconImportName];
+
+    const Icon = React.useMemo(() => {
+      if (!loader) {
+        console.warn(`Icon "${name}" not found in iconImports`);
+        return null;
+      }
+      return React.lazy(
+        loader as () => Promise<{
+          default: React.ComponentType<IconComponentProps>;
+        }>
+      );
+    }, [loader, name]);
+
+    if (!Icon) {
+      return null;
+    }
+
+    return (
+      <React.Suspense fallback={null}>
+        <Icon ref={ref} size={size} {...props} />
+      </React.Suspense>
+    );
+  }
+);
+
+DynamicIcon.displayName = "DynamicIcon";

package/src/icons/icon.tsx

@@ -0,0 +1,92 @@
+import * as React from "react";
+import type { LucideIcon, LucideProps } from "lucide-react";
+import * as LucideIcons from "lucide-react";
+
+export type IconName = keyof typeof LucideIcons;
+
+export interface IconProps extends Omit<LucideProps, "ref" | "name"> {
+  /**
+   * The name of the Lucide icon to render
+   * Can be a string (e.g., "Check", "ChevronDown") or a Lucide icon component
+   */
+  name?: IconName | LucideIcon;
+  /**
+   * Custom icon component to render instead of a Lucide icon
+   */
+  customIcon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  /**
+   * Additional class names to apply to the icon
+   */
+  className?: string;
+}
+
+/**
+ * Icon component that renders Lucide icons or custom SVG icons
+ *
+ * @example
+ * // Using Lucide icon by name
+ * <Icon name="Check" className="w-4 h-4" />
+ *
+ * @example
+ * // Using Lucide icon component
+ * import { Check } from "lucide-react";
+ * <Icon name={Check} />
+ *
+ * @example
+ * // Using custom icon
+ * <Icon customIcon={MyCustomIcon} className="w-6 h-6" />
+ */
+export const Icon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ name, customIcon, className, size = 24, ...props }, ref) => {
+    // Render custom icon if provided
+    if (customIcon) {
+      const CustomIcon = customIcon;
+      return (
+        <CustomIcon
+          ref={ref}
+          className={className}
+          height={size}
+          width={size}
+          {...(props as React.SVGProps<SVGSVGElement>)}
+        />
+      );
+    }
+
+    // Return null if no icon is specified
+    if (!name) {
+      return null;
+    }
+
+    // Handle Lucide icon component directly
+    if (typeof name === "function") {
+      const LucideIconComponent = name as LucideIcon;
+      return (
+        <LucideIconComponent
+          ref={ref}
+          className={className}
+          size={size}
+          {...props}
+        />
+      );
+    }
+
+    // Handle Lucide icon by string name
+    const LucideIconComponent = LucideIcons[name] as LucideIcon;
+
+    if (!LucideIconComponent) {
+      console.warn(`Icon "${name}" not found in lucide-react`);
+      return null;
+    }
+
+    return (
+      <LucideIconComponent
+        ref={ref}
+        className={className}
+        size={size}
+        {...props}
+      />
+    );
+  }
+);
+
+Icon.displayName = "Icon";

package/src/index.ts

@@ -0,0 +1,24 @@
+// Export the main Icon component
+export { Icon } from "./icons/icon.js";
+export type { IconProps, IconName } from "./icons/icon.js";
+
+// Export DynamicIcon for database-driven icon rendering
+export { DynamicIcon } from "./icons/dynamic-icon.js";
+export type { DynamicIconProps } from "./icons/dynamic-icon.js";
+export { iconImports } from "./icons/dynamic-icon-imports.js";
+export type { IconImportName } from "./icons/dynamic-icon-imports.js";
+
+// Re-export all Lucide icons for convenience
+export * from "lucide-react";
+
+// Re-export Lucide utilities for creating custom icons
+export { createLucideIcon } from "lucide-react";
+export type { IconNode } from "lucide-react";
+
+// Flag icons - Full list available via barrel exports
+// All icons are React SVG components with proper fill colors
+export * from "./flag/index.js";
+
+// Social Media icons - Full list available via barrel exports
+// All icons are React SVG components with proper fill colors
+export * from "./social-media/index.js";

package/src/social-media/android-neutral.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from "react";
+
+/**
+ * AndroidNeutral icon from social-media category
+ *
+ * @example
+ * <AndroidNeutral className="w-6 h-6" />
+ * <AndroidNeutral width={24} height={24} />
+ */
+export const AndroidNeutral = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="none"
+    height={24}
+    viewBox="0 0 24 24"
+    width={24}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M24 18.458H0C0.384063 14.39 2.70934 10.9152 6.14239 9.05496L4.15153 5.60624C4.03919 5.4129 4.10451 5.16731 4.29784 5.05496C4.49118 4.94262 4.73677 5.00794 4.84912 5.20127L6.8661 8.69442C8.40496 7.99161 10.1372 7.59971 12 7.59971C13.8628 7.59971 15.595 7.99161 17.1339 8.69442L19.1509 5.20127C19.2606 5.00794 19.5088 4.94262 19.6995 5.05496C19.8903 5.16731 19.9582 5.4129 19.8459 5.60624L17.855 9.05496C21.2907 10.9152 23.6159 14.39 24 18.458ZM17.5075 15.0876C18.064 15.0876 18.516 14.6356 18.5134 14.0817C18.5134 13.5279 18.064 13.0759 17.5075 13.0759C16.9536 13.0759 16.5016 13.5252 16.5016 14.0817C16.5016 14.6356 16.951 15.0876 17.5075 15.0876ZM6.48988 15.0876C7.04637 15.0876 7.49837 14.6356 7.49575 14.0817C7.49575 13.5279 7.04637 13.0759 6.48988 13.0759C5.93599 13.0759 5.484 13.5252 5.484 14.0817C5.484 14.6356 5.93338 15.0876 6.48988 15.0876Z"
+      fill="#111412"
+    />
+  </svg>
+);

package/src/social-media/android-original.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from "react";
+
+/**
+ * AndroidOriginal icon from social-media category
+ *
+ * @example
+ * <AndroidOriginal className="w-6 h-6" />
+ * <AndroidOriginal width={24} height={24} />
+ */
+export const AndroidOriginal = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="none"
+    height={24}
+    viewBox="0 0 24 24"
+    width={24}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M24 18.458H0C0.384063 14.39 2.70934 10.9152 6.14239 9.05496L4.15153 5.60624C4.03919 5.4129 4.10451 5.16731 4.29784 5.05496C4.49118 4.94262 4.73677 5.00794 4.84912 5.20127L6.8661 8.69442C8.40496 7.99161 10.1372 7.59971 12 7.59971C13.8628 7.59971 15.595 7.99161 17.1339 8.69442L19.1509 5.20127C19.2606 5.00794 19.5088 4.94262 19.6995 5.05496C19.8903 5.16731 19.9582 5.4129 19.8459 5.60624L17.855 9.05496C21.2907 10.9152 23.6159 14.39 24 18.458ZM17.5075 15.0876C18.064 15.0876 18.516 14.6356 18.5134 14.0817C18.5134 13.5279 18.064 13.0759 17.5075 13.0759C16.9536 13.0759 16.5016 13.5252 16.5016 14.0817C16.5016 14.6356 16.951 15.0876 17.5075 15.0876ZM6.48988 15.0876C7.04637 15.0876 7.49837 14.6356 7.49575 14.0817C7.49575 13.5279 7.04637 13.0759 6.48988 13.0759C5.93599 13.0759 5.484 13.5252 5.484 14.0817C5.484 14.6356 5.93338 15.0876 6.48988 15.0876Z"
+      fill="#3DDC84"
+    />
+  </svg>
+);

package/src/social-media/apple-music-neutral.tsx

@@ -0,0 +1,33 @@
+import type { SVGProps } from "react";
+
+/**
+ * AppleMusicNeutral icon from social-media category
+ *
+ * @example
+ * <AppleMusicNeutral className="w-6 h-6" />
+ * <AppleMusicNeutral width={24} height={24} />
+ */
+export const AppleMusicNeutral = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="none"
+    height={24}
+    viewBox="0 0 24 24"
+    width={24}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_43_556)">
+      <path
+        clipRule="evenodd"
+        d="M24.0006 7.50628V7.50751H24V16.4924C24 16.5498 24 16.6072 24 16.6646C24.0001 16.8939 24.0002 17.1231 23.9986 17.3524C23.9973 17.5937 23.9946 17.8351 23.988 18.0764C23.974 18.6018 23.9426 19.1324 23.8493 19.6525C23.7546 20.1805 23.5993 20.6718 23.3553 21.1518C23.1153 21.6232 22.8019 22.0538 22.4279 22.4279C22.0539 22.8019 21.6226 23.1152 21.1512 23.3552C20.6719 23.5992 20.1812 23.7546 19.6532 23.8492C19.1332 23.9426 18.6025 23.9739 18.0765 23.9879C17.8352 23.9946 17.5938 23.9972 17.3525 23.9986C17.0662 23.9999 16.78 23.9999 16.4937 23.9999H7.50758C7.45018 23.9999 7.39278 23.9999 7.33538 23.9999C7.10611 24.0001 6.87684 24.0002 6.64756 23.9986C6.40623 23.9972 6.16489 23.9946 5.92355 23.9879C5.39754 23.9739 4.86686 23.9426 4.34684 23.8492C3.8195 23.7539 3.32815 23.5992 2.84881 23.3552C2.37747 23.1152 1.94612 22.8019 1.57211 22.4279C1.1981 22.0538 0.884764 21.6232 0.644758 21.1518C0.400752 20.6718 0.245415 20.1805 0.150746 19.6525C0.057411 19.1324 0.0260769 18.6024 0.0120766 18.0764C0.00540975 17.8351 0.00274302 17.5937 0.00140966 17.3524C7.62939e-05 17.0657 7.62939e-05 16.7791 7.62939e-05 16.4924V7.50751C7.62939e-05 7.22083 7.62939e-05 6.93416 0.00140966 6.64815C0.00274302 6.40682 0.00540975 6.16548 0.0120766 5.92414C0.0260769 5.39879 0.057411 4.86811 0.150746 4.3481C0.245415 3.82009 0.400752 3.32874 0.644758 2.84873C0.884764 2.37739 1.1981 1.94671 1.57211 1.5727C1.94612 1.19869 2.37747 0.885354 2.84881 0.645348C3.32815 0.401343 3.81883 0.246006 4.34684 0.151337C4.86686 0.0573347 5.39754 0.0266673 5.92355 0.0120003C6.16489 0.00533346 6.40623 0.00266673 6.64756 0.00133336C6.93424 0 7.22091 0 7.50758 0H16.4931C16.7798 0 17.0665 0 17.3531 0.00133336C17.5945 0.00266673 17.8358 0.00533346 18.0772 0.0120003C18.6032 0.0260006 19.1339 0.0573347 19.6539 0.15067C20.1812 0.246006 20.6726 0.400676 21.1519 0.644682C21.6232 0.884687 22.0546 1.19803 22.4286 1.57204C22.8026 1.94605 23.1159 2.37672 23.356 2.84807C23.6 3.32808 23.7553 3.81942 23.85 4.34743C23.9433 4.86745 23.9746 5.39746 23.9886 5.92347C23.9953 6.16481 23.998 6.40615 23.9993 6.64749C24.0006 6.93375 24.0006 7.22002 24.0006 7.50628ZM16.2862 3.76554C16.348 3.75291 16.8619 3.66183 16.9197 3.65651C17.3047 3.62327 17.5207 3.8759 17.5194 4.28543V15.5747C17.5194 15.8779 17.5167 16.1525 17.4529 16.4563C17.3911 16.7508 17.2787 17.028 17.1045 17.2773C16.931 17.526 16.709 17.7301 16.4497 17.883C16.1878 18.0379 15.9125 18.1263 15.6187 18.1855C15.0669 18.2965 14.6893 18.3218 14.3349 18.2506C13.9932 18.1815 13.7033 18.0246 13.4713 17.8119C13.1276 17.4974 12.9135 17.0719 12.867 16.6271C12.8125 16.1059 12.9853 15.5495 13.3769 15.1393C13.5744 14.9319 13.8223 14.7683 14.1534 14.64C14.4998 14.5057 14.8821 14.4253 15.4698 14.3069L15.9345 14.2132C16.1386 14.172 16.3127 14.1201 16.4537 13.9479C16.596 13.7751 16.598 13.5637 16.598 13.3549V8.08355C16.598 7.68 16.4165 7.57031 16.0315 7.6441C15.7556 7.69795 9.84272 8.89064 9.84272 8.89064C9.50898 8.97175 9.39197 9.08078 9.39197 9.4943V17.2162C9.39197 17.5193 9.37668 17.7939 9.31286 18.0977C9.25103 18.3922 9.13867 18.6695 8.96449 18.9188C8.79097 19.1674 8.56892 19.3715 8.30964 19.5244C8.0477 19.6793 7.77247 19.7717 7.47862 19.8309C6.92682 19.9426 6.5492 19.9672 6.19485 19.8961C5.85313 19.8276 5.56327 19.666 5.33125 19.4533C4.98754 19.1388 4.78743 18.7134 4.74089 18.2686C4.68637 17.7474 4.84527 17.1909 5.23684 16.7807C5.4343 16.5733 5.68227 16.4098 6.01335 16.2814C6.35972 16.1471 6.742 16.0667 7.3297 15.9484L7.79441 15.8546C7.99851 15.8134 8.17269 15.7616 8.31363 15.5894C8.45457 15.4172 8.47119 15.2151 8.47119 15.007V6.10371C8.47119 5.98405 8.48117 5.90294 8.48715 5.86305C8.51574 5.67557 8.59086 5.51468 8.72648 5.401C8.83884 5.30659 8.98443 5.24078 9.16992 5.20155L9.17258 5.20089L16.2862 3.76554Z"
+        fill="#111412"
+        fillRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_43_556">
+        <rect fill="white" height="24" width="24" />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/social-media/apple-music-original.tsx

@@ -0,0 +1,50 @@
+import type { SVGProps } from "react";
+
+/**
+ * AppleMusicOriginal icon from social-media category
+ *
+ * @example
+ * <AppleMusicOriginal className="w-6 h-6" />
+ * <AppleMusicOriginal width={24} height={24} />
+ */
+export const AppleMusicOriginal = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="none"
+    height={24}
+    viewBox="0 0 24 24"
+    width={24}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_43_553)">
+      <path
+        clipRule="evenodd"
+        d="M24.0006 7.50751C24.0006 7.22083 24.0006 6.93416 23.9992 6.64749C23.9979 6.40615 23.9952 6.16481 23.9886 5.92347C23.9746 5.39746 23.9432 4.86745 23.8499 4.34743C23.7552 3.81942 23.5999 3.32808 23.3559 2.84807C23.1159 2.37672 22.8025 1.94605 22.4285 1.57204C22.0545 1.19803 21.6232 0.884687 21.1518 0.644682C20.6725 0.400676 20.1811 0.246006 19.6538 0.15067C19.1338 0.0573347 18.6031 0.0260006 18.0771 0.0120003C17.8357 0.00533346 17.5944 0.00266673 17.3531 0.00133336C17.0664 0 16.7797 0 16.4931 0H7.50751C7.22083 0 6.93416 0 6.64749 0.00133336C6.40615 0.00266673 6.16481 0.00533346 5.92347 0.0120003C5.39746 0.0266673 4.86678 0.0573347 4.34677 0.151337C3.81876 0.246006 3.32808 0.401343 2.84873 0.645348C2.37739 0.885354 1.94605 1.19869 1.57204 1.5727C1.19803 1.94671 0.884687 2.37739 0.644682 2.84873C0.400676 3.32874 0.245339 3.82009 0.15067 4.3481C0.0573347 4.86811 0.0260006 5.39879 0.0120003 5.92414C0.00533346 6.16548 0.00266673 6.40682 0.00133336 6.64815C0 6.93416 0 7.22083 0 7.50751V16.4924C0 16.7791 0 17.0657 0.00133336 17.3524C0.00266673 17.5937 0.00533346 17.8351 0.0120003 18.0764C0.0260006 18.6024 0.0573347 19.1324 0.15067 19.6525C0.245339 20.1805 0.400676 20.6718 0.644682 21.1518C0.884687 21.6232 1.19803 22.0538 1.57204 22.4279C1.94605 22.8019 2.37739 23.1152 2.84873 23.3552C3.32808 23.5992 3.81942 23.7539 4.34677 23.8492C4.86678 23.9426 5.39746 23.9739 5.92347 23.9879C6.16481 23.9946 6.40615 23.9972 6.64749 23.9986C6.93416 24.0006 7.22083 23.9999 7.50751 23.9999H16.4924C16.7791 23.9999 17.0657 23.9999 17.3524 23.9986C17.5937 23.9972 17.8351 23.9946 18.0764 23.9879C18.6024 23.9739 19.1331 23.9426 19.6531 23.8492C20.1811 23.7546 20.6718 23.5992 21.1512 23.3552C21.6225 23.1152 22.0538 22.8019 22.4279 22.4279C22.8019 22.0538 23.1152 21.6232 23.3552 21.1518C23.5992 20.6718 23.7546 20.1805 23.8492 19.6525C23.9426 19.1324 23.9739 18.6018 23.9879 18.0764C23.9946 17.8351 23.9972 17.5937 23.9986 17.3524C24.0006 17.0657 23.9999 16.7791 23.9999 16.4924V7.50751H24.0006Z"
+        fill="url(#paint0_linear_43_553)"
+        fillRule="evenodd"
+      />
+      <path
+        clipRule="evenodd"
+        d="M16.9197 3.65649C16.8618 3.66181 16.3479 3.75289 16.2861 3.76552L9.17253 5.20087L9.16987 5.20153C8.98439 5.24075 8.83879 5.30657 8.72644 5.40098C8.59082 5.51466 8.51569 5.67555 8.4871 5.86303C8.48112 5.90292 8.47115 5.98402 8.47115 6.10369C8.47115 6.10369 8.47115 13.3715 8.47115 15.007C8.47115 15.215 8.45453 15.4172 8.31359 15.5893C8.17264 15.7615 7.99846 15.8134 7.79436 15.8546C7.63946 15.8859 7.48456 15.9171 7.32965 15.9483C6.74195 16.0667 6.35968 16.1471 6.01331 16.2814C5.68223 16.4097 5.43425 16.5733 5.2368 16.7807C4.84522 17.1909 4.68633 17.7473 4.74084 18.2686C4.78738 18.7133 4.98749 19.1388 5.3312 19.4533C5.56323 19.666 5.85309 19.8276 6.1948 19.896C6.54915 19.9672 6.92677 19.9426 7.47857 19.8309C7.77242 19.7717 8.04766 19.6793 8.3096 19.5244C8.56888 19.3715 8.79093 19.1674 8.96444 18.9188C9.13863 18.6695 9.25098 18.3922 9.31281 18.0977C9.37663 17.7939 9.39192 17.5193 9.39192 17.2162V9.49427C9.39192 9.08075 9.50893 8.97172 9.84267 8.89062C9.84267 8.89062 15.7556 7.69793 16.0315 7.64408C16.4164 7.57028 16.5979 7.67998 16.5979 8.08352V13.3549C16.5979 13.5636 16.5959 13.775 16.4536 13.9479C16.3127 14.1201 16.1385 14.1719 15.9344 14.2132C15.7795 14.2444 15.6246 14.2757 15.4697 14.3069C14.882 14.4252 14.4997 14.5057 14.1534 14.64C13.8223 14.7683 13.5743 14.9318 13.3769 15.1393C12.9853 15.5495 12.8124 16.1059 12.8669 16.6271C12.9135 17.0719 13.1275 17.4974 13.4713 17.8118C13.7033 18.0246 13.9931 18.1815 14.3349 18.2506C14.6892 18.3218 15.0668 18.2965 15.6186 18.1855C15.9125 18.1263 16.1877 18.0379 16.4497 17.883C16.7089 17.7301 16.931 17.526 17.1045 17.2773C17.2787 17.028 17.391 16.7508 17.4529 16.4563C17.5167 16.1524 17.5193 15.8779 17.5193 15.5747V4.28541C17.5207 3.87588 17.3046 3.62325 16.9197 3.65649Z"
+        fill="white"
+        fillRule="evenodd"
+      />
+    </g>
+    <defs>
+      <linearGradient
+        gradientUnits="userSpaceOnUse"
+        id="paint0_linear_43_553"
+        x1="12.0003"
+        x2="12.0003"
+        y1="23.9075"
+        y2="0.517251"
+      >
+        <stop stopColor="#FA233B" />
+        <stop offset="1" stopColor="#FB5C74" />
+      </linearGradient>
+      <clipPath id="clip0_43_553">
+        <rect fill="white" height="24" width="24" />
+      </clipPath>
+    </defs>
+  </svg>
+);