react-native-ensys-camera-x 1.0.7

package/src/defaultIcons.tsx

@@ -0,0 +1,2390 @@
+/**
+ * Default icon implementations built entirely from React Native primitives.
+ *
+ * NO external dependencies required:
+ * - No react-native-vector-icons
+ * - No @expo/vector-icons
+ * - No react-native-svg
+ * - No custom assets or image files
+ *
+ * All icons are drawn using View and simple geometric shapes.
+ * This ensures the plugin works anywhere React Native works, with zero
+ * additional setup or configuration.
+ */
+
+import React from 'react';
+import { View, Text, Animated } from 'react-native';
+import {
+  DEFAULT_ICON_COLOR,
+  DEFAULT_ICON_SIZE,
+  DEFAULT_ICON_STROKE_WIDTH,
+} from './icons';
+import type { IconComponent, IconProps } from './icons';
+
+// Centralized icon defaults — see src/icons.tsx. Components never hardcode
+// sizes/colors/stroke widths; they all flow from the single icon configuration.
+const DEFAULT_SIZE = DEFAULT_ICON_SIZE;
+const DEFAULT_COLOR = DEFAULT_ICON_COLOR;
+const DEFAULT_STROKE = DEFAULT_ICON_STROKE_WIDTH;
+
+// ============================================================================
+// Utility: Create icon wrappers
+// ============================================================================
+
+/**
+ * Base wrapper for all icons.
+ * Ensures consistent sizing and layout.
+ */
+const IconWrapper = ({
+  size = DEFAULT_SIZE,
+  style,
+  children,
+}: {
+  size: number;
+  style?: IconProps['style'];
+  children: React.ReactNode;
+}) => (
+  <View
+    style={[
+      {
+        width: size,
+        height: size,
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
+      },
+      style,
+    ]}
+  >
+    {children}
+  </View>
+);
+
+// ============================================================================
+// Common/Control Icons
+// ============================================================================
+
+/** X icon / close button */
+export const CloseIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  const lineLength = size * 0.55;
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* \ diagonal */}
+      <View
+        style={{
+          position: 'absolute',
+          width: lineLength,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+      {/* / diagonal */}
+      <View
+        style={{
+          position: 'absolute',
+          width: lineLength,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '-45deg' }],
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Left arrow / back button */
+export const BackIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  const arrowSize = size * 0.6;
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Horizontal line */}
+      <View
+        style={{
+          position: 'absolute',
+          width: arrowSize,
+          height: strokeWidth,
+          backgroundColor: color,
+        }}
+      />
+      {/* Top arrow point */}
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.2,
+          top: size * 0.35,
+          width: size * 0.3,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+      {/* Bottom arrow point */}
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.2,
+          bottom: size * 0.35,
+          width: size * 0.3,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '-45deg' }],
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Checkmark / done button */
+export const DoneIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Vertical part of checkmark */}
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.35,
+          width: strokeWidth,
+          height: size * 0.4,
+          backgroundColor: color,
+          transform: [{ rotate: '-45deg' }],
+        }}
+      />
+      {/* Horizontal part of checkmark */}
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.4,
+          width: size * 0.5,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Cancel / stop button */
+export const CancelIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  const circleSize = size * 0.8;
+  return (
+    <IconWrapper size={size} style={style}>
+      <View
+        style={{
+          width: circleSize,
+          height: circleSize,
+          borderRadius: circleSize / 2,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {/* Inner X */}
+        <View
+          style={{
+            position: 'absolute',
+            width: circleSize * 0.5,
+            height: strokeWidth,
+            backgroundColor: color,
+            transform: [{ rotate: '45deg' }],
+          }}
+        />
+        <View
+          style={{
+            position: 'absolute',
+            width: circleSize * 0.5,
+            height: strokeWidth,
+            backgroundColor: color,
+            transform: [{ rotate: '-45deg' }],
+          }}
+        />
+      </View>
+    </IconWrapper>
+  );
+};
+
+// ============================================================================
+// Camera Controls
+// ============================================================================
+
+/** Camera icon */
+export const CameraIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  const bodyW = size * 0.8;
+  const bodyH = size * 0.6;
+  const lensSize = size * 0.3;
+
+  return (
+    <IconWrapper size={size} style={style}>
+      <View
+        style={{
+          width: bodyW,
+          height: bodyH,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderRadius: size * 0.12,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <View
+          style={{
+            width: lensSize,
+            height: lensSize,
+            borderRadius: lensSize / 2,
+            borderWidth: strokeWidth,
+            borderColor: color,
+          }}
+        />
+      </View>
+    </IconWrapper>
+  );
+};
+
+/** Video/camcorder icon */
+export const VideoIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  const mainW = size * 0.7;
+  const mainH = size * 0.55;
+
+  return (
+    <IconWrapper size={size} style={style}>
+      <View
+        style={{
+          width: mainW,
+          height: mainH,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderRadius: size * 0.08,
+          marginRight: size * 0.15,
+        }}
+      />
+      {/* Play triangle indicating video */}
+      <View
+        style={{
+          position: 'absolute',
+          right: 0,
+          width: 0,
+          height: 0,
+          borderLeftWidth: size * 0.12,
+          borderTopWidth: size * 0.08,
+          borderBottomWidth: size * 0.08,
+          borderLeftColor: color,
+          borderTopColor: 'transparent',
+          borderBottomColor: 'transparent',
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Photo/picture icon */
+export const PhotoIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Frame */}
+      <View
+        style={{
+          width: size * 0.85,
+          height: size * 0.75,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderRadius: size * 0.08,
+        }}
+      />
+      {/* Circle (sun/object) */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.2,
+          right: size * 0.15,
+          width: size * 0.25,
+          height: size * 0.25,
+          borderRadius: (size * 0.25) / 2,
+          borderWidth: strokeWidth,
+          borderColor: color,
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Flip/mirror camera icon */
+export const FlipIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Left arrow */}
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.1,
+          width: size * 0.25,
+          height: strokeWidth,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.15,
+          top: size * 0.35,
+          width: size * 0.15,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.15,
+          bottom: size * 0.35,
+          width: size * 0.15,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '-45deg' }],
+        }}
+      />
+      {/* Right arrow */}
+      <View
+        style={{
+          position: 'absolute',
+          right: size * 0.1,
+          width: size * 0.25,
+          height: strokeWidth,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          right: size * 0.15,
+          top: size * 0.35,
+          width: size * 0.15,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '-45deg' }],
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          right: size * 0.15,
+          bottom: size * 0.35,
+          width: size * 0.15,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Flash on icon */
+export const FlashOnIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Lightning bolt */}
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.4,
+          width: size * 0.2,
+          height: size * 0.35,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.45,
+          width: size * 0.35,
+          height: size * 0.15,
+          backgroundColor: color,
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Flash off icon */
+export const FlashOffIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Disabled flash + diagonal line */}
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.4,
+          width: size * 0.2,
+          height: size * 0.35,
+          backgroundColor: color,
+          opacity: 0.4,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          width: size * 0.9,
+          height: strokeWidth * 1.5,
+          backgroundColor: color,
+          transform: [{ rotate: '-45deg' }],
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Flash auto icon */
+export const FlashAutoIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.4,
+          width: size * 0.2,
+          height: size * 0.35,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.45,
+          width: size * 0.35,
+          height: size * 0.15,
+          backgroundColor: color,
+        }}
+      />
+      {/* 'A' indicator - using a simple marker for auto mode */}
+      <View
+        style={{
+          position: 'absolute',
+          bottom: size * 0.1,
+          right: size * 0.1,
+          width: size * 0.12,
+          height: size * 0.12,
+          borderRadius: (size * 0.12) / 2,
+          borderWidth: strokeWidth,
+          borderColor: color,
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Gallery icon */
+export const GalleryIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  const frameSize = size * 0.75;
+
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Top-left frame */}
+      <View
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: frameSize,
+          height: frameSize,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderRadius: size * 0.06,
+        }}
+      />
+      {/* Bottom-right frame (offset) */}
+      <View
+        style={{
+          position: 'absolute',
+          bottom: 0,
+          right: 0,
+          width: frameSize,
+          height: frameSize,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderRadius: size * 0.06,
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+// ============================================================================
+// Editor Tools
+// ============================================================================
+
+/** Crop icon */
+export const CropIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  const boxSize = size * 0.6;
+  return (
+    <IconWrapper size={size} style={style}>
+      <View
+        style={{
+          width: boxSize,
+          height: boxSize,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderStyle: 'dashed',
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Rotate icon */
+export const RotateIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Circular arrow */}
+      <View
+        style={{
+          width: size * 0.7,
+          height: size * 0.7,
+          borderRadius: (size * 0.7) / 2,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderTopColor: 'transparent',
+        }}
+      />
+      {/* Arrow head */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.1,
+          right: size * 0.1,
+          width: size * 0.15,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Filter icon */
+export const FilterIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Funnel shape */}
+      <View
+        style={{
+          position: 'absolute',
+          top: 0,
+          width: size * 0.8,
+          height: strokeWidth,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          top: strokeWidth * 2,
+          width: size * 0.6,
+          height: size * 0.3,
+          borderLeftWidth: size * 0.1,
+          borderRightWidth: size * 0.1,
+          borderLeftColor: 'transparent',
+          borderRightColor: 'transparent',
+          borderTopWidth: size * 0.3,
+          borderTopColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          bottom: 0,
+          width: size * 0.15,
+          height: size * 0.3,
+          backgroundColor: color,
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Sticker icon */
+export const StickerIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  const stickerSize = size * 0.65;
+  return (
+    <IconWrapper size={size} style={style}>
+      <View
+        style={{
+          width: stickerSize,
+          height: stickerSize,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderRadius: stickerSize * 0.25,
+          transform: [{ rotate: '15deg' }],
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Emoji icon */
+export const EmojiIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  const faceSize = size * 0.75;
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Face circle */}
+      <View
+        style={{
+          width: faceSize,
+          height: faceSize,
+          borderRadius: faceSize / 2,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {/* Left eye */}
+        <View
+          style={{
+            position: 'absolute',
+            top: faceSize * 0.35,
+            left: faceSize * 0.25,
+            width: size * 0.08,
+            height: size * 0.08,
+            borderRadius: (size * 0.08) / 2,
+            backgroundColor: color,
+          }}
+        />
+        {/* Right eye */}
+        <View
+          style={{
+            position: 'absolute',
+            top: faceSize * 0.35,
+            right: faceSize * 0.25,
+            width: size * 0.08,
+            height: size * 0.08,
+            borderRadius: (size * 0.08) / 2,
+            backgroundColor: color,
+          }}
+        />
+        {/* Smile */}
+        <View
+          style={{
+            position: 'absolute',
+            bottom: faceSize * 0.2,
+            width: faceSize * 0.3,
+            height: faceSize * 0.15,
+            borderBottomWidth: strokeWidth,
+            borderBottomColor: color,
+            borderRadius: faceSize * 0.15,
+          }}
+        />
+      </View>
+    </IconWrapper>
+  );
+};
+
+/** Text icon */
+export const TextIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* T shape */}
+      <View
+        style={{
+          position: 'absolute',
+          top: 0,
+          width: size * 0.6,
+          height: strokeWidth,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.45,
+          width: strokeWidth,
+          height: size * 0.7,
+          backgroundColor: color,
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Draw/pencil icon */
+export const DrawIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Pencil shape */}
+      <View
+        style={{
+          width: size * 0.7,
+          height: strokeWidth * 1.5,
+          backgroundColor: color,
+          transform: [{ rotate: '-45deg' }],
+        }}
+      />
+      {/* Eraser part */}
+      <View
+        style={{
+          position: 'absolute',
+          bottom: 0,
+          right: 0,
+          width: size * 0.2,
+          height: size * 0.2,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          transform: [{ rotate: '-45deg' }],
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Undo icon */
+export const UndoIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Curved arrow */}
+      <View
+        style={{
+          width: size * 0.5,
+          height: size * 0.5,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderRadius: size * 0.25,
+          borderRightColor: 'transparent',
+          borderBottomColor: 'transparent',
+        }}
+      />
+      {/* Arrow head */}
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.15,
+          top: size * 0.15,
+          width: size * 0.15,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '-45deg' }],
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Redo icon */
+export const RedoIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Curved arrow (mirrored) */}
+      <View
+        style={{
+          width: size * 0.5,
+          height: size * 0.5,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderRadius: size * 0.25,
+          borderLeftColor: 'transparent',
+          borderBottomColor: 'transparent',
+          transform: [{ scaleX: -1 }],
+        }}
+      />
+      {/* Arrow head */}
+      <View
+        style={{
+          position: 'absolute',
+          right: size * 0.15,
+          top: size * 0.15,
+          width: size * 0.15,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Delete/trash icon */
+export const DeleteIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  const bodyWidth = size * 0.5;
+  const bodyHeight = size * 0.55;
+  const lidWidth = size * 0.6;
+  const handleWidth = size * 0.25;
+
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Trash can handle */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.1,
+          width: handleWidth,
+          height: size * 0.15,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderBottomWidth: 0,
+          borderTopLeftRadius: size * 0.05,
+          borderTopRightRadius: size * 0.05,
+        }}
+      />
+      {/* Trash can lid */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.25,
+          width: lidWidth,
+          height: strokeWidth,
+          backgroundColor: color,
+        }}
+      />
+      {/* Trash can body */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.25 + strokeWidth,
+          width: bodyWidth,
+          height: bodyHeight,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderTopWidth: 0,
+          borderBottomLeftRadius: size * 0.1,
+          borderBottomRightRadius: size * 0.1,
+        }}
+      />
+      {/* Vertical lines inside the body */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.4,
+          width: strokeWidth,
+          height: size * 0.3,
+          backgroundColor: color,
+          left: size * 0.35,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.4,
+          width: strokeWidth,
+          height: size * 0.3,
+          backgroundColor: color,
+          right: size * 0.35,
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+// ============================================================================
+// Playback & Media
+// ============================================================================
+
+/** Play button */
+export const PlayIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Triangle play shape */}
+      <View
+        style={{
+          width: 0,
+          height: 0,
+          borderLeftWidth: size * 0.35,
+          borderTopWidth: size * 0.2,
+          borderBottomWidth: size * 0.2,
+          borderLeftColor: color,
+          borderTopColor: 'transparent',
+          borderBottomColor: 'transparent',
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Pause button */
+export const PauseIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  style,
+}) => {
+  const barWidth = size * 0.15;
+  const barHeight = size * 0.6;
+
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Left bar */}
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.2,
+          width: barWidth,
+          height: barHeight,
+          backgroundColor: color,
+        }}
+      />
+      {/* Right bar */}
+      <View
+        style={{
+          position: 'absolute',
+          right: size * 0.2,
+          width: barWidth,
+          height: barHeight,
+          backgroundColor: color,
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Download icon */
+export const DownloadIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Horizontal line at top */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.2,
+          width: size * 0.4,
+          height: strokeWidth,
+          backgroundColor: color,
+        }}
+      />
+      {/* Vertical line */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.4,
+          width: strokeWidth,
+          height: size * 0.35,
+          backgroundColor: color,
+        }}
+      />
+      {/* Arrow down-left */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.6,
+          left: size * 0.2,
+          width: size * 0.2,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+      {/* Arrow down-right */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.6,
+          right: size * 0.2,
+          width: size * 0.2,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '-45deg' }],
+        }}
+      />
+      {/* Base line */}
+      <View
+        style={{
+          position: 'absolute',
+          bottom: 0,
+          width: size * 0.8,
+          height: strokeWidth,
+          backgroundColor: color,
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Share icon */
+export const ShareIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  const dotSize = size * 0.22;
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Left dot (center vertically) */}
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.15,
+          width: dotSize,
+          height: dotSize,
+          borderRadius: dotSize / 2,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          backgroundColor: 'transparent',
+        }}
+      />
+      {/* Top-right dot */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.15,
+          right: size * 0.15,
+          width: dotSize,
+          height: dotSize,
+          borderRadius: dotSize / 2,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          backgroundColor: 'transparent',
+        }}
+      />
+      {/* Bottom-right dot */}
+      <View
+        style={{
+          position: 'absolute',
+          bottom: size * 0.15,
+          right: size * 0.15,
+          width: dotSize,
+          height: dotSize,
+          borderRadius: dotSize / 2,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          backgroundColor: 'transparent',
+        }}
+      />
+      {/* Connecting line to top */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.32,
+          left: size * 0.34,
+          width: size * 0.35,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '-35deg' }],
+        }}
+      />
+      {/* Connecting line to bottom */}
+      <View
+        style={{
+          position: 'absolute',
+          bottom: size * 0.32,
+          left: size * 0.34,
+          width: size * 0.35,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '35deg' }],
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Send/paper plane icon */
+export const SendIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Paper plane shape */}
+      <View
+        style={{
+          position: 'absolute',
+          width: 0,
+          height: 0,
+          borderLeftWidth: size * 0.25,
+          borderTopWidth: size * 0.3,
+          borderLeftColor: color,
+          borderTopColor: color,
+        }}
+      />
+      {/* Tail line */}
+      <View
+        style={{
+          position: 'absolute',
+          bottom: size * 0.3,
+          right: size * 0.1,
+          width: size * 0.3,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** More/menu icon (three dots) */
+export const MoreIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  style,
+}) => {
+  const dotSize = size * 0.12;
+
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Left dot */}
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.1,
+          width: dotSize,
+          height: dotSize,
+          borderRadius: dotSize / 2,
+          backgroundColor: color,
+        }}
+      />
+      {/* Center dot */}
+      <View
+        style={{
+          width: dotSize,
+          height: dotSize,
+          borderRadius: dotSize / 2,
+          backgroundColor: color,
+        }}
+      />
+      {/* Right dot */}
+      <View
+        style={{
+          position: 'absolute',
+          right: size * 0.1,
+          width: dotSize,
+          height: dotSize,
+          borderRadius: dotSize / 2,
+          backgroundColor: color,
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+// ============================================================================
+// Document & Audio
+// ============================================================================
+
+/** Document icon */
+export const DocumentIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  const w = size * 0.6;
+  const h = size * 0.8;
+
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Page */}
+      <View
+        style={{
+          width: w,
+          height: h,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderRadius: size * 0.08,
+          alignItems: 'center',
+          justifyContent: 'flex-start',
+          paddingTop: size * 0.1,
+        }}
+      >
+        {/* Lines of text */}
+        <View
+          style={{
+            width: w * 0.7,
+            height: strokeWidth,
+            backgroundColor: color,
+            marginVertical: size * 0.08,
+          }}
+        />
+        <View
+          style={{
+            width: w * 0.7,
+            height: strokeWidth,
+            backgroundColor: color,
+            marginVertical: size * 0.08,
+          }}
+        />
+        <View
+          style={{
+            width: w * 0.7,
+            height: strokeWidth,
+            backgroundColor: color,
+            marginVertical: size * 0.08,
+          }}
+        />
+      </View>
+    </IconWrapper>
+  );
+};
+
+/** Audio icon */
+export const AudioIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Speaker cone */}
+      <View
+        style={{
+          width: size * 0.2,
+          height: size * 0.6,
+          borderLeftWidth: strokeWidth * 1.5,
+          borderTopWidth: size * 0.25,
+          borderBottomWidth: size * 0.25,
+          borderLeftColor: color,
+          borderTopColor: 'transparent',
+          borderBottomColor: 'transparent',
+        }}
+      />
+      {/* Sound waves */}
+      <View
+        style={{
+          position: 'absolute',
+          right: -size * 0.05,
+          width: size * 0.4,
+          height: size * 0.4,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderRadius: size * 0.2,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          right: -size * 0.15,
+          width: size * 0.65,
+          height: size * 0.65,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderRadius: size * 0.325,
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+// ============================================================================
+// States & Indicators
+// ============================================================================
+
+/** Lock icon */
+export const LockIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Shackle */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.1,
+          width: size * 0.5,
+          height: size * 0.35,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderBottomColor: 'transparent',
+          borderRadius: size * 0.25,
+        }}
+      />
+      {/* Body */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.4,
+          width: size * 0.7,
+          height: size * 0.5,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderRadius: size * 0.08,
+        }}
+      />
+      {/* Keyhole */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.55,
+          width: size * 0.15,
+          height: size * 0.15,
+          borderRadius: (size * 0.15) / 2,
+          borderWidth: strokeWidth,
+          borderColor: color,
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Unlock icon */
+export const LockOpenIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Open shackle */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.1,
+          left: size * 0.25,
+          width: size * 0.25,
+          height: size * 0.35,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderBottomColor: 'transparent',
+          borderTopRightRadius: size * 0.15,
+        }}
+      />
+      {/* Body */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.4,
+          width: size * 0.7,
+          height: size * 0.5,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderRadius: size * 0.08,
+        }}
+      />
+      {/* Keyhole */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.55,
+          width: size * 0.15,
+          height: size * 0.15,
+          borderRadius: (size * 0.15) / 2,
+          borderWidth: strokeWidth,
+          borderColor: color,
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Chevron up / collapse icon */
+export const ChevronUpIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.25,
+          width: size * 0.5,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          right: size * 0.25,
+          width: size * 0.5,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '-45deg' }],
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Checkmark/check icon */
+export const CheckIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return <DoneIcon size={size} color={color} strokeWidth={strokeWidth} style={style} />;
+};
+
+/** Volume on icon */
+export const VolumeOnIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Speaker */}
+      <View
+        style={{
+          width: size * 0.2,
+          height: size * 0.6,
+          borderLeftWidth: strokeWidth * 1.5,
+          borderTopWidth: size * 0.3,
+          borderBottomWidth: size * 0.3,
+          borderLeftColor: color,
+          borderTopColor: 'transparent',
+          borderBottomColor: 'transparent',
+        }}
+      />
+      {/* Sound waves */}
+      <View
+        style={{
+          position: 'absolute',
+          right: -size * 0.08,
+          width: size * 0.35,
+          height: size * 0.35,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderRadius: size * 0.175,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          right: -size * 0.18,
+          width: size * 0.55,
+          height: size * 0.55,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderRadius: size * 0.275,
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Volume off / mute icon */
+export const VolumeOffIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Speaker */}
+      <View
+        style={{
+          width: size * 0.2,
+          height: size * 0.6,
+          borderLeftWidth: strokeWidth * 1.5,
+          borderTopWidth: size * 0.3,
+          borderBottomWidth: size * 0.3,
+          borderLeftColor: color,
+          borderTopColor: 'transparent',
+          borderBottomColor: 'transparent',
+        }}
+      />
+      {/* Mute slash */}
+      <View
+        style={{
+          position: 'absolute',
+          width: size * 0.7,
+          height: strokeWidth * 1.5,
+          backgroundColor: color,
+          transform: [{ rotate: '-45deg' }],
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+// ============================================================================
+// Media Operations
+// ============================================================================
+
+/** Trim icon */
+export const TrimIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Left bracket */}
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.1,
+          top: size * 0.15,
+          width: strokeWidth,
+          height: size * 0.7,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.1,
+          top: size * 0.15,
+          width: size * 0.15,
+          height: strokeWidth,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          left: size * 0.1,
+          bottom: size * 0.15,
+          width: size * 0.15,
+          height: strokeWidth,
+          backgroundColor: color,
+        }}
+      />
+      {/* Right bracket */}
+      <View
+        style={{
+          position: 'absolute',
+          right: size * 0.1,
+          top: size * 0.15,
+          width: strokeWidth,
+          height: size * 0.7,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          right: size * 0.1,
+          top: size * 0.15,
+          width: size * 0.15,
+          height: strokeWidth,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          right: size * 0.1,
+          bottom: size * 0.15,
+          width: size * 0.15,
+          height: strokeWidth,
+          backgroundColor: color,
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Cover/frame icon */
+export const CoverIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Rectangle with crosshair */}
+      <View
+        style={{
+          width: size * 0.8,
+          height: size * 0.6,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderRadius: size * 0.06,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {/* Horizontal line */}
+        <View
+          style={{
+            position: 'absolute',
+            width: size * 0.5,
+            height: strokeWidth,
+            backgroundColor: color,
+          }}
+        />
+        {/* Vertical line */}
+        <View
+          style={{
+            position: 'absolute',
+            width: strokeWidth,
+            height: size * 0.4,
+            backgroundColor: color,
+          }}
+        />
+      </View>
+    </IconWrapper>
+  );
+};
+
+/** Compress icon */
+export const CompressIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Compress arrows pointing inward */}
+      {/* Top-left arrow */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.1,
+          left: size * 0.1,
+          width: size * 0.2,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+      {/* Bottom-right arrow */}
+      <View
+        style={{
+          position: 'absolute',
+          bottom: size * 0.1,
+          right: size * 0.1,
+          width: size * 0.2,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Export icon */
+export const ExportIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Up arrow */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.15,
+          width: size * 0.4,
+          height: strokeWidth,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.25,
+          left: size * 0.3,
+          width: strokeWidth,
+          height: size * 0.25,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.4,
+          left: size * 0.2,
+          width: size * 0.2,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '-45deg' }],
+        }}
+      />
+      {/* Box bottom */}
+      <View
+        style={{
+          position: 'absolute',
+          bottom: 0,
+          width: size * 0.8,
+          height: size * 0.3,
+          borderTopWidth: strokeWidth,
+          borderColor: color,
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Upload icon */
+export const UploadIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Up arrow */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.2,
+          width: size * 0.4,
+          height: strokeWidth,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.3,
+          left: size * 0.3,
+          width: strokeWidth,
+          height: size * 0.25,
+          backgroundColor: color,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.2,
+          left: size * 0.2,
+          width: size * 0.2,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+      {/* Base line */}
+      <View
+        style={{
+          position: 'absolute',
+          bottom: 0,
+          width: size * 0.8,
+          height: strokeWidth,
+          backgroundColor: color,
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+// ============================================================================
+// Basic Shapes
+// ============================================================================
+
+/** Plus/add icon */
+export const PlusIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  const barLength = size * 0.5;
+
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Horizontal */}
+      <View
+        style={{
+          position: 'absolute',
+          width: barLength,
+          height: strokeWidth,
+          backgroundColor: color,
+        }}
+      />
+      {/* Vertical */}
+      <View
+        style={{
+          position: 'absolute',
+          width: strokeWidth,
+          height: barLength,
+          backgroundColor: color,
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Minus/subtract icon */
+export const MinusIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      <View
+        style={{
+          width: size * 0.6,
+          height: strokeWidth,
+          backgroundColor: color,
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Stop button (square) */
+export const StopIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  style,
+}) => {
+  const squareSize = size * 0.5;
+  return (
+    <IconWrapper size={size} style={style}>
+      <View
+        style={{
+          width: squareSize,
+          height: squareSize,
+          backgroundColor: color,
+          borderRadius: size * 0.05,
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Mute icon (speaker with X) */
+export const MuteIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Speaker */}
+      <View
+        style={{
+          width: size * 0.2,
+          height: size * 0.6,
+          borderLeftWidth: strokeWidth * 1.5,
+          borderTopWidth: size * 0.3,
+          borderBottomWidth: size * 0.3,
+          borderLeftColor: color,
+          borderTopColor: 'transparent',
+          borderBottomColor: 'transparent',
+        }}
+      />
+      {/* X mark */}
+      <View
+        style={{
+          position: 'absolute',
+          right: size * 0.05,
+          width: size * 0.3,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          right: size * 0.05,
+          width: size * 0.3,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '-45deg' }],
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+// ============================================================================
+// Recording / audio / mode icons
+// ============================================================================
+
+/** Photo-mode indicator — reuses the camera glyph. */
+export const PhotoModeIcon: IconComponent = (props) => <CameraIcon {...props} />;
+
+/** Video-mode indicator — reuses the video glyph. */
+export const VideoModeIcon: IconComponent = (props) => <VideoIcon {...props} />;
+
+/** Browse-audio default — reuses the audio glyph. */
+export const BrowseAudioIcon: IconComponent = (props) => <AudioIcon {...props} />;
+
+/** Image+video (combined media) default — reuses the photo glyph. */
+export const ImageVideoIcon: IconComponent = (props) => <PhotoIcon {...props} />;
+
+/** Chevron right / disclosure icon */
+export const ChevronRightIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* upper stroke of the ">" */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.25,
+          width: size * 0.5,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '45deg' }],
+        }}
+      />
+      {/* lower stroke of the ">" */}
+      <View
+        style={{
+          position: 'absolute',
+          bottom: size * 0.25,
+          width: size * 0.5,
+          height: strokeWidth,
+          backgroundColor: color,
+          transform: [{ rotate: '-45deg' }],
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Record button — filled circle (color-driven). */
+export const RecordIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  style,
+}) => {
+  const dot = size * 0.6;
+  return (
+    <IconWrapper size={size} style={style}>
+      <View
+        style={{
+          width: dot,
+          height: dot,
+          borderRadius: dot / 2,
+          backgroundColor: color,
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Warning — triangle outline with an exclamation mark. */
+export const WarningIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Triangle (border trick) */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.1,
+          width: 0,
+          height: 0,
+          borderLeftWidth: size * 0.44,
+          borderRightWidth: size * 0.44,
+          borderBottomWidth: size * 0.72,
+          borderLeftColor: 'transparent',
+          borderRightColor: 'transparent',
+          borderBottomColor: color,
+        }}
+      />
+      {/* Exclamation stem — rendered in the wrapper background tone so it
+          reads as a cut-out against the filled triangle. */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.42,
+          width: strokeWidth,
+          height: size * 0.22,
+          backgroundColor: '#FFFFFF',
+        }}
+      />
+      {/* Exclamation dot */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.68,
+          width: strokeWidth,
+          height: strokeWidth,
+          borderRadius: strokeWidth,
+          backgroundColor: '#FFFFFF',
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+/** Microphone — rounded capsule head, stand arc, and base. */
+export const MicIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}) => {
+  const capsuleW = size * 0.28;
+  const capsuleH = size * 0.42;
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Capsule head */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.12,
+          width: capsuleW,
+          height: capsuleH,
+          borderRadius: capsuleW / 2,
+          backgroundColor: color,
+        }}
+      />
+      {/* Stand arc (U-shape cradle) */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.38,
+          width: size * 0.5,
+          height: size * 0.28,
+          borderColor: color,
+          borderWidth: strokeWidth,
+          borderTopWidth: 0,
+          borderBottomLeftRadius: size * 0.25,
+          borderBottomRightRadius: size * 0.25,
+        }}
+      />
+      {/* Stem */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.66,
+          width: strokeWidth,
+          height: size * 0.14,
+          backgroundColor: color,
+        }}
+      />
+      {/* Base */}
+      <View
+        style={{
+          position: 'absolute',
+          top: size * 0.8,
+          width: size * 0.4,
+          height: strokeWidth,
+          backgroundColor: color,
+        }}
+      />
+    </IconWrapper>
+  );
+};
+
+// ============================================================================
+// Interactive & Inline Icons
+// ============================================================================
+
+/**
+ * Plus icon that morphs into a Cross (✕) as [progress] animates 0 → 1.
+ * When progress is omitted or 0, renders a static Plus (+).
+ */
+export const PlusCloseIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = 2.4,
+  progress,
+  style,
+}: IconProps) => {
+  const barLength = Math.round(size * 0.58);
+  let spin: any = '0deg';
+
+  if (progress && typeof (progress as any).interpolate === 'function') {
+    spin = (progress as Animated.Value).interpolate({
+      inputRange: [0, 1],
+      outputRange: ['0deg', '225deg'],
+    });
+  } else if (typeof progress === 'number') {
+    spin = `${progress * 225}deg`;
+  }
+
+  const horizontal = {
+    position: 'absolute' as const,
+    width: barLength,
+    height: strokeWidth,
+    borderRadius: strokeWidth,
+    backgroundColor: color,
+  };
+  const vertical = {
+    position: 'absolute' as const,
+    width: strokeWidth,
+    height: barLength,
+    borderRadius: strokeWidth,
+    backgroundColor: color,
+  };
+
+  return (
+    <Animated.View
+      style={[
+        {
+          width: size,
+          height: size,
+          alignItems: 'center',
+          justifyContent: 'center',
+          position: 'relative',
+          transform: [{ rotate: spin }],
+        },
+        style,
+      ]}
+    >
+      <View style={horizontal} />
+      <View style={vertical} />
+    </Animated.View>
+  );
+};
+
+/**
+ * Circular seek skip ring icon (◀ -10s / ▶ +10s).
+ * Renders an open-topped circular arrow ring with directional arrowhead
+ * and a centered seconds label.
+ */
+export const CircularSeekIcon: IconComponent = ({
+  direction = 'forward',
+  label = '10',
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}: IconProps) => {
+  const head = Math.max(3, strokeWidth * 2);
+  return (
+    <View
+      style={[
+        {
+          width: size,
+          height: size,
+          alignItems: 'center',
+          justifyContent: 'center',
+          position: 'relative',
+        },
+        style,
+      ]}
+    >
+      {/* Open-topped ring — curved arrow body */}
+      <View
+        style={{
+          position: 'absolute',
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          borderTopColor: 'transparent',
+        }}
+      />
+      {/* Arrowhead in the top gap, pointing in the seek direction (◀ back / ▶ forward) */}
+      <View
+        style={{
+          position: 'absolute',
+          top: -strokeWidth * 0.4,
+          left: direction === 'back' ? size * 0.24 : undefined,
+          right: direction === 'forward' ? size * 0.24 : undefined,
+          width: 0,
+          height: 0,
+          borderTopWidth: head,
+          borderBottomWidth: head,
+          borderTopColor: 'transparent',
+          borderBottomColor: 'transparent',
+          borderLeftWidth: direction === 'forward' ? head : 0,
+          borderRightWidth: direction === 'back' ? head : 0,
+          borderLeftColor: direction === 'forward' ? color : 'transparent',
+          borderRightColor: direction === 'back' ? color : 'transparent',
+        }}
+      />
+      <Text
+        style={{
+          color: color as string,
+          fontSize: size * 0.4,
+          fontWeight: '600',
+          includeFontPadding: false,
+          textAlign: 'center',
+        }}
+      >
+        {label}
+      </Text>
+    </View>
+  );
+};
+
+/**
+ * View Details / Info (ⓘ) icon.
+ * Renders an outlined circular badge with a centered 'i' glyph (dot + stem).
+ */
+export const ViewDetailsIcon: IconComponent = ({
+  size = DEFAULT_SIZE,
+  color = DEFAULT_COLOR,
+  strokeWidth = DEFAULT_STROKE,
+  style,
+}: IconProps) => {
+  const circleSize = size * 0.85;
+  const dotSize = Math.max(2, strokeWidth * 1.2);
+  const stemWidth = Math.max(1.5, strokeWidth);
+  const stemHeight = size * 0.28;
+
+  return (
+    <IconWrapper size={size} style={style}>
+      {/* Outer circle */}
+      <View
+        style={{
+          width: circleSize,
+          height: circleSize,
+          borderRadius: circleSize / 2,
+          borderWidth: strokeWidth,
+          borderColor: color,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {/* Dot of the 'i' */}
+        <View
+          style={{
+            position: 'absolute',
+            top: circleSize * 0.22,
+            width: dotSize,
+            height: dotSize,
+            borderRadius: dotSize / 2,
+            backgroundColor: color,
+          }}
+        />
+        {/* Stem of the 'i' */}
+        <View
+          style={{
+            position: 'absolute',
+            bottom: circleSize * 0.22,
+            width: stemWidth,
+            height: stemHeight,
+            borderRadius: stemWidth / 2,
+            backgroundColor: color,
+          }}
+        />
+      </View>
+    </IconWrapper>
+  );
+};
+
+/** Alias for ViewDetailsIcon */
+export const InfoIcon = ViewDetailsIcon;