diff --git a/scripts/assets/extract-dimensions.ts b/scripts/assets/extract-dimensions.ts
new file mode 100644
index 0000000000..dfa1984e91
--- /dev/null
+++ b/scripts/assets/extract-dimensions.ts
@@ -0,0 +1,58 @@
+const fs = require('fs');
+const path = require('path');
+const sizeOf = require('image-size');
+
+// Base paths
+const ICONS_PATH = path.resolve(__dirname, '../../src/assets/internal/icons');
+const IMAGES_PATH = path.resolve(__dirname, '../../src/assets/internal/images');
+
+// Function to get dimensions of an image
+function getDimensions(imagePath) {
+  try {
+    const dimensions = sizeOf(imagePath);
+    return {
+      width: dimensions.width,
+      height: dimensions.height
+    };
+  } catch (error) {
+    console.error(`Error getting dimensions for ${imagePath}:`, error);
+    return { width: 0, height: 0 };
+  }
+}
+
+// Function to create web index files with dimensions
+function createWebIndexFile(sourcePath, targetPath, fileType) {
+  const files = fs.readdirSync(sourcePath)
+    .filter(file => file.endsWith('.png') && !file.includes('@'));
+  
+  let content = '';
+  
+  if (fileType === 'icons') {
+    content = 'export const icons = {\n';
+  } else if (fileType === 'images') {
+    content = 'export const images = {\n';
+  }
+  
+  files.forEach(file => {
+    const name = path.basename(file, '.png');
+    const dimensions = getDimensions(path.join(sourcePath, file));
+    
+    // Handle hyphenated filenames by converting to camelCase
+    const propertyName = name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+    
+    content += `  get ${propertyName}() {\n`;
+    content += `    return {uri: require('./${file}'), dimensions: {width: ${dimensions.width}, height: ${dimensions.height}}};\n`;
+    content += `  },\n`;
+  });
+  
+  content += '};\n';
+  
+  fs.writeFileSync(targetPath, content);
+  console.log(`Created ${targetPath}`);
+}
+
+// Create web index files
+createWebIndexFile(ICONS_PATH, path.join(ICONS_PATH, 'index.web.ts'), 'icons');
+createWebIndexFile(IMAGES_PATH, path.join(IMAGES_PATH, 'index.web.ts'), 'images');
+
+console.log('Web index files created successfully!');
diff --git a/src/assets/index.web.ts b/src/assets/index.web.ts
new file mode 100644
index 0000000000..1ecedc90fb
--- /dev/null
+++ b/src/assets/index.web.ts
@@ -0,0 +1,10 @@
+import {Assets} from './Assets';
+
+export default new Assets().loadAssetsGroup('', {
+  get emojis() {
+    return require('./emojis').emojis;
+  },
+  get internal() {
+    return require('./internal').internal;
+  }
+});
diff --git a/src/assets/internal/icons/index.web.ts b/src/assets/internal/icons/index.web.ts
new file mode 100644
index 0000000000..a27cf998d4
--- /dev/null
+++ b/src/assets/internal/icons/index.web.ts
@@ -0,0 +1,47 @@
+export const icons = {
+  get checkSmall() {
+    return {uri: require('./check-small.png'), dimensions: {width: 24, height: 24}};
+  },
+  get check() {
+    return {uri: require('./check.png'), dimensions: {width: 21, height: 15}};
+  },
+  get checkMarkSmall() {
+    return {uri: require('./checkMarkSmall.png'), dimensions: {width: 16, height: 16}};
+  },
+  get dropdown() {
+    return {uri: require('./dropdown.png'), dimensions: {width: 16, height: 16}};
+  },
+  get exclamationSmall() {
+    return {uri: require('./exclamationSmall.png'), dimensions: {width: 16, height: 16}};
+  },
+  get hintTipMiddle() {
+    return {uri: require('./hintTipMiddle.png'), dimensions: {width: 20, height: 7}};
+  },
+  get hintTipSide() {
+    return {uri: require('./hintTipSide.png'), dimensions: {width: 20, height: 24}};
+  },
+  get minusSmall() {
+    return {uri: require('./minusSmall.png'), dimensions: {width: 16, height: 16}};
+  },
+  get plusSmall() {
+    return {uri: require('./plusSmall.png'), dimensions: {width: 16, height: 16}};
+  },
+  get search() {
+    return {uri: require('./search.png'), dimensions: {width: 24, height: 24}};
+  },
+  get transparentSwatch() {
+    return {uri: require('./transparentSwatch.png'), dimensions: {width: 100, height: 100}};
+  },
+  get x() {
+    return {uri: require('./x.png'), dimensions: {width: 17, height: 16}};
+  },
+  get xFlat() {
+    return {uri: require('./xFlat.png'), dimensions: {width: 16, height: 16}};
+  },
+  get xMedium() {
+    return {uri: require('./xMedium.png'), dimensions: {width: 24, height: 24}};
+  },
+  get xSmall() {
+    return {uri: require('./xSmall.png'), dimensions: {width: 16, height: 16}};
+  },
+};
diff --git a/src/assets/internal/images/index.web.ts b/src/assets/internal/images/index.web.ts
new file mode 100644
index 0000000000..5f86bcd54a
--- /dev/null
+++ b/src/assets/internal/images/index.web.ts
@@ -0,0 +1,17 @@
+export const images = {
+  get gradient() {
+    return {uri: require('./gradient.png'), dimensions: {width: 56, height: 2}};
+  },
+  get gradientOverlay() {
+    return {uri: require('./gradientOverlay.png'), dimensions: {width: 76, height: 48}};
+  },
+  get gradientOverlayHigh() {
+    return {uri: require('./gradientOverlayHigh.png'), dimensions: {width: 1, height: 297}};
+  },
+  get gradientOverlayLow() {
+    return {uri: require('./gradientOverlayLow.png'), dimensions: {width: 1, height: 297}};
+  },
+  get gradientOverlayMedium() {
+    return {uri: require('./gradientOverlayMedium.png'), dimensions: {width: 1, height: 297}};
+  },
+};
diff --git a/src/assets/internal/index.web.ts b/src/assets/internal/index.web.ts
new file mode 100644
index 0000000000..6b281d4294
--- /dev/null
+++ b/src/assets/internal/index.web.ts
@@ -0,0 +1,8 @@
+export const internal = {
+  get icons() {
+    return require('./icons').icons;
+  },
+  get images() {
+    return require('./images').images;
+  }
+};