chore: import upstream snapshot with attribution

apps/sim/app/(landing)/integrations/components/integration-icon.tsx

@@ -0,0 +1,51 @@
+import type { ComponentType, ElementType, HTMLAttributes, SVGProps } from 'react'
+import { cn } from '@sim/emcn'
+import { getTileIconColorClass } from '@/blocks/icon-color'
+
+interface IntegrationIconProps extends HTMLAttributes<HTMLElement> {
+  bgColor: string
+  /** Integration name - used for the fallback initial letter. */
+  name: string
+  /** Optional icon component. When absent, renders the first letter of `name`. */
+  Icon?: ComponentType<SVGProps<SVGSVGElement>> | null
+  /** Tailwind size + rounding classes for the container. Default: `size-10 rounded-xl` */
+  className?: string
+  /** Tailwind size classes for the icon SVG. Default: `size-5` */
+  iconClassName?: string
+  /** Tailwind text-size class for the fallback letter. Default: `text-[15px]` */
+  fallbackClassName?: string
+  /** Rendered HTML element. Default: `div` */
+  as?: ElementType
+}
+
+/**
+ * Colored icon box used across integration listing and detail pages.
+ * Renders an integration icon over a brand-colored background, falling back
+ * to the integration's initial letter when no icon is available.
+ */
+export function IntegrationIcon({
+  bgColor,
+  name,
+  Icon,
+  className,
+  iconClassName = 'size-5',
+  fallbackClassName = 'text-[15px]',
+  as: Tag = 'div',
+  ...rest
+}: IntegrationIconProps) {
+  return (
+    <Tag
+      className={cn('flex shrink-0 items-center justify-center', className)}
+      style={{ background: bgColor }}
+      {...rest}
+    >
+      {Icon ? (
+        <Icon className={cn(iconClassName, getTileIconColorClass(bgColor))} />
+      ) : (
+        <span className={cn('leading-none', getTileIconColorClass(bgColor), fallbackClassName)}>
+          {name.charAt(0)}
+        </span>
+      )}
+    </Tag>
+  )
+}