diff --git a/packages/base/bundle.esm.js b/packages/base/bundle.esm.js
index b81e05d2174c..d9f76317bb19 100644
--- a/packages/base/bundle.esm.js
+++ b/packages/base/bundle.esm.js
@@ -1,4 +1,4 @@
-import { registerThemeProperties } from "./dist/AssetRegistry.js";
+import { registerThemePropertiesLoader } from "./dist/AssetRegistry.js";
 
 // ESM bundle targets browsers with native support
 import "./dist/features/OpenUI5Support.js";
@@ -20,11 +20,10 @@ import { isIE } from "./dist/Device.js";
 window.isIE = isIE; // attached to the window object for testing purposes
 
 // used for tests - to register a custom theme
-window.registerThemeProperties = registerThemeProperties;
+window.registerThemePropertiesLoader = registerThemePropertiesLoader;
 
 // i18n
-import "./dist/features/PropertiesFormatSupport.js";
-import { registerI18nBundle, fetchI18nBundle, getI18nBundle } from "./dist/i18nBundle.js";
+import { registerI18nLoader, fetchI18nBundle, getI18nBundle } from "./dist/i18nBundle.js";
 
 // Note: keep in sync with rollup.config value for IIFE
 import { getAnimationMode } from "./dist/config/AnimationMode.js";
@@ -34,7 +33,7 @@ import { getTheme, setTheme } from "./dist/config/Theme.js";
 import { getNoConflict, setNoConflict } from "./dist/config/NoConflict.js";
 import { getRTL } from "./dist/config/RTL.js";
 import { getFirstDayOfWeek } from "./dist/config/FormatSettings.js";
-import { getRegisteredNames as getIconNames } from  "./dist/SVGIconRegistry.js"
+import { _getRegisteredNames as getIconNames } from  "./dist/asset-registries/Icons.js"
 window["sap-ui-webcomponents-bundle"] = {
 	configuration : {
 		getAnimationMode,
@@ -48,7 +47,7 @@ window["sap-ui-webcomponents-bundle"] = {
 		getFirstDayOfWeek,
 	},
 	getIconNames,
-	registerI18nBundle,
+	registerI18nLoader,
 	fetchI18nBundle,
 	getI18nBundle,
 	renderFinished,
diff --git a/packages/base/src/AssetRegistry.js b/packages/base/src/AssetRegistry.js
index 307c966967d7..ba71fae7edc5 100644
--- a/packages/base/src/AssetRegistry.js
+++ b/packages/base/src/AssetRegistry.js
@@ -1,12 +1,11 @@
-import { registerI18nBundle } from "./asset-registries/i18n.js";
-import { registerCldr, _registerMappingFunction as registerCldrMappingFunction } from "./asset-registries/LocaleData.js";
-import { registerThemeProperties } from "./asset-registries/Themes.js";
-import { registerAssetPathMappingFunction } from "./util/EffectiveAssetPath.js";
+import { registerI18nLoader } from "./asset-registries/i18n.js";
+import { registerLocaleDataLoader } from "./asset-registries/LocaleData.js";
+import { registerThemePropertiesLoader } from "./asset-registries/Themes.js";
+import { registerIconLoader } from "./asset-registries/Icons.js";
 
 export {
-	registerCldr,
-	registerCldrMappingFunction,
-	registerThemeProperties,
-	registerI18nBundle,
-	registerAssetPathMappingFunction,
+	registerI18nLoader,
+	registerLocaleDataLoader,
+	registerThemePropertiesLoader,
+	registerIconLoader,
 };
diff --git a/packages/base/src/util/parseProperties.js b/packages/base/src/PropertiesFileFormat.js
similarity index 91%
rename from packages/base/src/util/parseProperties.js
rename to packages/base/src/PropertiesFileFormat.js
index 9de28143d6ea..3e24c3a48f55 100644
--- a/packages/base/src/util/parseProperties.js
+++ b/packages/base/src/PropertiesFileFormat.js
@@ -15,6 +15,12 @@ const mEscapes = {
 	"\\t": "\t",
 };
 
+/**
+ * Parses a .properties format
+ * @param {string} sText the contents a of a .properties file
+ * @returns a object with key/value pairs parsed from the .properties file format
+ * @public
+ */
 const parseProperties = sText => {
 	const properties = {},
 		aLines = sText.split(rLines);
diff --git a/packages/base/src/SVGIconRegistry.js b/packages/base/src/SVGIconRegistry.js
deleted file mode 100644
index 3f2d4e24f9e9..000000000000
--- a/packages/base/src/SVGIconRegistry.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import getSharedResource from "./getSharedResource.js";
-
-const registry = getSharedResource("SVGIcons.registry", new Map());
-const iconCollectionPromises = getSharedResource("SVGIcons.promises", new Map());
-
-const ICON_NOT_FOUND = "ICON_NOT_FOUND";
-const DEFAULT_COLLECTION = "SAP-icons";
-
-const parseName = name => {
-	// silently support ui5-compatible URIs
-	if (name.startsWith("sap-icon://")) {
-		name = name.replace("sap-icon://", "");
-	}
-
-	let collection;
-	[name, collection] = name.split("/").reverse();
-	collection = collection || DEFAULT_COLLECTION;
-	// hardcoded alias in case icon explorer is used, resolve `SAP-icons-TNT` to `tnt`
-	// aliases can be made a feature in the future if more collections need it or more aliases are needed.
-	if (collection === "SAP-icons-TNT") {
-		collection = "tnt";
-	}
-	const registryKey = `${collection}/${name}`;
-	return { name, collection, registryKey };
-};
-
-
-const registerIcon = (name, { pathData, ltr, accData, collection } = {}) => { // eslint-disable-line
-	if (!collection) {
-		collection = DEFAULT_COLLECTION;
-	}
-
-	const key = `${collection}/${name}`;
-	registry.set(key, { pathData, ltr, accData });
-};
-
-const getIconDataSync = nameProp => {
-	const { registryKey } = parseName(nameProp);
-	return registry.get(registryKey);
-};
-
-const getIconData = async nameProp => {
-	const { collection, registryKey } = parseName(nameProp);
-
-	if (!iconCollectionPromises.has(collection)) {
-		iconCollectionPromises.set(collection, Promise.resolve(ICON_NOT_FOUND));
-	}
-
-	const iconData = await iconCollectionPromises.get(collection);
-
-	if (iconData === ICON_NOT_FOUND) {
-		return iconData;
-	}
-
-	return registry.get(registryKey);
-};
-
-const getRegisteredNames = async () => {
-	await Promise.all(Array.from(iconCollectionPromises.values()));
-	return Array.from(registry.keys());
-};
-
-const registerCollectionPromise = (collection, promise) => {
-	iconCollectionPromises.set(collection, promise);
-};
-
-export {
-	getIconData,
-	getIconDataSync,
-	registerIcon,
-	getRegisteredNames,
-	registerCollectionPromise,
-};
diff --git a/packages/base/src/asset-registries/Icons.js b/packages/base/src/asset-registries/Icons.js
index 741aa60d4e28..ea3b5461ec1d 100644
--- a/packages/base/src/asset-registries/Icons.js
+++ b/packages/base/src/asset-registries/Icons.js
@@ -1,22 +1,33 @@
-import { registerIcon, registerCollectionPromise } from "../SVGIconRegistry.js";
-import { fetchJsonOnce } from "../util/FetchHelper.js";
-import { getEffectiveAssetPath } from "../util/EffectiveAssetPath.js";
+import getSharedResource from "../getSharedResource.js";
 
+const loaders = new Map();
+const registry = getSharedResource("SVGIcons.registry", new Map());
+const iconCollectionPromises = getSharedResource("SVGIcons.promises", new Map());
+
+const ICON_NOT_FOUND = "ICON_NOT_FOUND";
+const DEFAULT_COLLECTION = "SAP-icons";
+
+/**
+ * @deprecated
+ */
 const registerIconBundle = async (collectionName, bundleData) => {
-	let resolveFn;
-	const collectionFetched = new Promise(resolve => {
-		resolveFn = resolve;
-	});
-	registerCollectionPromise(collectionName, collectionFetched);
+	throw new Error("This method has been removed. Use `registerIconLoader` instead.");
+};
 
-	if (typeof bundleData !== "object") { // not inlined from build -> fetch it
-		bundleData = await fetchJsonOnce(getEffectiveAssetPath(bundleData));
+const registerIconLoader = async (collectionName, loader) => {
+	loaders.set(collectionName, loader);
+};
+
+const _loadIconCollectionOnce = async collectionName => {
+	if (!iconCollectionPromises.has(collectionName)) {
+		const loadIcons = loaders.get(collectionName);
+		iconCollectionPromises.set(collectionName, loadIcons(collectionName));
 	}
-	fillRegistry(bundleData);
-	resolveFn();
+
+	return iconCollectionPromises.get(collectionName);
 };
 
-const fillRegistry = bundleData => {
+const _fillRegistry = bundleData => {
 	Object.keys(bundleData.data).forEach(iconName => {
 		const iconData = bundleData.data[iconName];
 
@@ -29,4 +40,73 @@ const fillRegistry = bundleData => {
 	});
 };
 
-export { registerIconBundle }; // eslint-disable-line
+// set
+const registerIcon = (name, { pathData, ltr, accData, collection } = {}) => { // eslint-disable-line
+	if (!collection) {
+		collection = DEFAULT_COLLECTION;
+	}
+
+	const key = `${collection}/${name}`;
+	registry.set(key, { pathData, ltr, accData });
+};
+
+const _parseName = name => {
+	// silently support ui5-compatible URIs
+	if (name.startsWith("sap-icon://")) {
+		name = name.replace("sap-icon://", "");
+	}
+
+	let collection;
+	[name, collection] = name.split("/").reverse();
+	collection = collection || DEFAULT_COLLECTION;
+	// hardcoded alias in case icon explorer is used, resolve `SAP-icons-TNT` to `tnt`
+	// aliases can be made a feature in the future if more collections need it or more aliases are needed.
+	if (collection === "SAP-icons-TNT") {
+		collection = "tnt";
+	}
+	const registryKey = `${collection}/${name}`;
+	return { name, collection, registryKey };
+};
+
+const getIconDataSync = nameProp => {
+	const { registryKey } = _parseName(nameProp);
+	return registry.get(registryKey);
+};
+
+const getIconData = async nameProp => {
+	const { collection, registryKey } = _parseName(nameProp);
+
+	let iconData = ICON_NOT_FOUND;
+	try {
+		iconData = await _loadIconCollectionOnce(collection);
+	} catch (e) {
+		console.error(e.message); /* eslint-disable-line */
+	}
+
+	if (iconData === ICON_NOT_FOUND) {
+		return iconData;
+	}
+
+	if (!registry.has(registryKey)) {
+		// not filled by another await. many getters will await on the same loader, but fill only once
+		_fillRegistry(iconData);
+	}
+	return registry.get(registryKey);
+};
+
+// test page usage only
+const _getRegisteredNames = async () => {
+	// fetch one icon of each collection to trigger the bundle load
+	await getIconData("edit");
+	await getIconData("tnt/arrow");
+	return Array.from(registry.keys());
+};
+
+export {
+	registerIconBundle,
+	registerIconLoader,
+	getIconData,
+	getIconDataSync,
+	registerIcon,
+	_getRegisteredNames,
+};
diff --git a/packages/base/src/asset-registries/LocaleData.js b/packages/base/src/asset-registries/LocaleData.js
index 78821d5a9467..22c048b1a288 100644
--- a/packages/base/src/asset-registries/LocaleData.js
+++ b/packages/base/src/asset-registries/LocaleData.js
@@ -1,17 +1,12 @@
-import { fetchJsonOnce } from "../util/FetchHelper.js";
 import { attachLanguageChange } from "../locale/languageChange.js";
 import getLocale from "../locale/getLocale.js";
-import { getFeature } from "../FeaturesRegistry.js";
 import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from "../generated/AssetParameters.js";
-import { getEffectiveAssetPath } from "../util/EffectiveAssetPath.js";
-
-const resources = new Map();
-const cldrData = {};
-const cldrUrls = {};
+import { getFeature } from "../FeaturesRegistry.js";
 
-// externally configurable mapping function for resolving (localeId -> URL)
-// default implementation - ui5 CDN
-let cldrMappingFn = locale => `https://ui5.sap.com/1.60.2/resources/sap/ui/core/cldr/${locale}.json`;
+const localeDataMap = new Map();
+const loaders = new Map();
+const cldrPromises = new Map();
+const reportedErrors = new Set();
 
 const M_ISO639_OLD_TO_NEW = {
 	"iw": "he",
@@ -50,73 +45,67 @@ const calcLocale = (language, region, script) => {
 	return localeId;
 };
 
+// internal set data
+const setLocaleData = (localeId, content) => {
+	localeDataMap.set(localeId, content);
+};
 
-const resolveMissingMappings = () => {
-	if (!cldrMappingFn) {
-		return;
+// external getSync
+const getLocaleData = localeId => {
+	const content = localeDataMap.get(localeId);
+	if (!content) {
+		throw new Error(`CLDR data for locale ${localeId} is not loaded!`);
 	}
 
-	const missingLocales = SUPPORTED_LOCALES.filter(locale => !cldrData[locale] && !cldrUrls[locale]);
-	missingLocales.forEach(locale => {
-		cldrUrls[locale] = cldrMappingFn(locale);
-	});
+	return content;
 };
 
-const registerModuleContent = (moduleName, content) => {
-	resources.set(moduleName, content);
-};
-
-const getModuleContent = moduleName => {
-	const moduleContent = resources.get(moduleName);
-	if (moduleContent) {
-		return moduleContent;
-	}
+// load bundle over the network once
+const _loadCldrOnce = localeId => {
+	const loadCldr = loaders.get(localeId);
 
-	const missingModule = moduleName.match(/sap\/ui\/core\/cldr\/(\w+)\.json/);
-	if (missingModule) {
-		throw new Error(`CLDR data for locale ${missingModule[1]} is not loaded!`);
+	if (!cldrPromises.get(localeId)) {
+		cldrPromises.set(localeId, loadCldr(localeId));
 	}
 
-	throw new Error(`Unknown module ${moduleName}`);
+	return cldrPromises.get(localeId);
 };
 
+// external getAsync
 const fetchCldr = async (language, region, script) => {
-	resolveMissingMappings();
 	const localeId = calcLocale(language, region, script);
 
-	let cldrObj = cldrData[localeId];
-	const url = cldrUrls[localeId];
-
+	// reuse OpenUI5 CLDR if present
 	const OpenUI5Support = getFeature("OpenUI5Support");
-	if (!cldrObj && OpenUI5Support) {
-		cldrObj = OpenUI5Support.getLocaleDataObject();
+	if (OpenUI5Support) {
+		const cldrContent = OpenUI5Support.getLocaleDataObject();
+		if (cldrContent) {
+			// only if openui5 actually returned valid content
+			setLocaleData(localeId, cldrContent);
+			return;
+		}
 	}
 
-	if (cldrObj) {
-		// inlined from build or fetched independently
-		registerModuleContent(`sap/ui/core/cldr/${localeId}.json`, cldrObj);
-	} else if (url) {
-		// fetch it
-		const cldrContent = await fetchJsonOnce(getEffectiveAssetPath(url));
-		registerModuleContent(`sap/ui/core/cldr/${localeId}.json`, cldrContent);
+	// fetch it
+	try {
+		const cldrContent = await _loadCldrOnce(localeId);
+		setLocaleData(localeId, cldrContent);
+	} catch (e) {
+		if (!reportedErrors.has(e.message)) {
+			reportedErrors.add(e.message);
+			console.error(e.message); /* eslint-disable-line */
+		}
 	}
 };
 
-const registerCldr = (locale, url) => {
-	cldrUrls[locale] = url;
-};
-
-const setCldrData = (locale, data) => {
-	cldrData[locale] = data;
+const registerLocaleDataLoader = (localeId, loader) => {
+	loaders.set(localeId, loader);
 };
 
-const getCldrData = locale => {
-	return cldrData[locale];
-};
-
-const _registerMappingFunction = mappingFn => {
-	cldrMappingFn = mappingFn;
-};
+// register default loader for "en" from ui5 CDN (dev workflow without assets)
+registerLocaleDataLoader("en", async runtimeLocaleId => {
+	return (await fetch(`https://ui5.sap.com/1.60.2/resources/sap/ui/core/cldr/en.json`)).json();
+});
 
 // When the language changes dynamically (the user calls setLanguage),
 // re-fetch the required CDRD data.
@@ -126,10 +115,7 @@ attachLanguageChange(() => {
 });
 
 export {
+	registerLocaleDataLoader,
 	fetchCldr,
-	registerCldr,
-	setCldrData,
-	getCldrData,
-	getModuleContent,
-	_registerMappingFunction,
+	getLocaleData,
 };
diff --git a/packages/base/src/asset-registries/Themes.js b/packages/base/src/asset-registries/Themes.js
index 81754ab3049f..39f833f7201a 100644
--- a/packages/base/src/asset-registries/Themes.js
+++ b/packages/base/src/asset-registries/Themes.js
@@ -1,10 +1,7 @@
-import { fetchJsonOnce, fetchTextOnce } from "../util/FetchHelper.js";
 import { DEFAULT_THEME } from "../generated/AssetParameters.js";
-import getFileExtension from "../util/getFileExtension.js";
-import { getEffectiveAssetPath } from "../util/EffectiveAssetPath.js";
 
-const themeURLs = new Map();
 const themeStyles = new Map();
+const loaders = new Map();
 const registeredPackages = new Set();
 const registeredThemes = new Set();
 
@@ -16,29 +13,19 @@ const registeredThemes = new Set();
  * Example usage:
  *  1) Pass the CSS Vars as a string directly.
  *  registerThemeProperties("my-package", "my_theme", ":root{--var1: red;}");
- *  2) Pass the CSS Vars as an object directly
- *  registerThemeProperties("my-package", "my_theme", {"_": ":root{--var1: red;}"});
- *  3) Pass a URL to a CSS file, containing the CSS Vars. Will be fetched on demand, not upon registration.
- *  registerThemeProperties("my-package", "my_theme", "http://url/to/my/theme.css");
- *  4) Pass a URL to a JSON file, containing the CSS Vars in its "_" property. Will be fetched on demand, not upon registration.
- *  registerThemeProperties("my-package", "my_theme", "http://url/to/my/theme.json");
  *
  * @public
  * @param packageName - the NPM package for which CSS Vars are registered
  * @param themeName - the theme which the CSS Vars implement
- * @param style - can be one of four options: a string, an object with a "_" property, URL to a CSS file, or URL to a JSON file with a "_" property
+ * @param style - the style content directly
+ * @deprecated
  */
-const registerThemeProperties = (packageName, themeName, style) => {
-	if (style._) {
-		// JSON object like ({"_": ":root"})
-		themeStyles.set(`${packageName}_${themeName}`, style._);
-	} else if (style.includes(":root") || style === "") {
-		// pure string, including empty string
-		themeStyles.set(`${packageName}_${themeName}`, style);
-	} else {
-		// url for fetching
-		themeURLs.set(`${packageName}_${themeName}`, style);
-	}
+const registerThemeProperties = (_packageName, _themeName, _style) => {
+	throw new Error("`registerThemeProperties` has been depracated. Use `registerThemePropertiesLoader` instead.");
+};
+
+const registerThemePropertiesLoader = (packageName, themeName, loader) => {
+	loaders.set(`${packageName}/${themeName}`, loader);
 	registeredPackages.add(packageName);
 	registeredThemes.add(themeName);
 };
@@ -55,23 +42,25 @@ const getThemeProperties = async (packageName, themeName) => {
 		return themeStyles.get(`${packageName}_${DEFAULT_THEME}`);
 	}
 
-	const data = await fetchThemeProperties(packageName, themeName);
+	const loader = loaders.get(`${packageName}/${themeName}`);
+	if (!loader) {
+		// no themes for package
+		console.error(`Theme [${themeName}] not registered for package [${pacakgeName}]`); /* eslint-disable-line */
+		return;
+	}
+	let data;
+	try {
+		data = await loader(themeName);
+	} catch (e) {
+		console.error(packageName, e.message); /* eslint-disable-line */
+		return;
+	}
 	const themeProps = data._ || data;
 
 	themeStyles.set(`${packageName}_${themeName}`, themeProps);
 	return themeProps;
 };
 
-const fetchThemeProperties = async (packageName, themeName) => {
-	const url = themeURLs.get(`${packageName}_${themeName}`);
-
-	if (!url) {
-		throw new Error(`You have to import the ${packageName}/dist/Assets.js module to switch to additional themes`);
-	}
-
-	return getFileExtension(url) === ".css" ? fetchTextOnce(url) : fetchJsonOnce(getEffectiveAssetPath(url));
-};
-
 const getRegisteredPackages = () => {
 	return registeredPackages;
 };
@@ -81,6 +70,7 @@ const isThemeRegistered = theme => {
 };
 
 export {
+	registerThemePropertiesLoader,
 	registerThemeProperties,
 	getThemeProperties,
 	getRegisteredPackages,
diff --git a/packages/base/src/asset-registries/i18n.js b/packages/base/src/asset-registries/i18n.js
index aa2d7c6d05df..3a49ca908227 100644
--- a/packages/base/src/asset-registries/i18n.js
+++ b/packages/base/src/asset-registries/i18n.js
@@ -1,23 +1,31 @@
-import { getFeature } from "../FeaturesRegistry.js";
 import getLocale from "../locale/getLocale.js";
 import { attachLanguageChange } from "../locale/languageChange.js";
-import { fetchTextOnce } from "../util/FetchHelper.js";
 import normalizeLocale from "../locale/normalizeLocale.js";
 import nextFallbackLocale from "../locale/nextFallbackLocale.js";
 import { DEFAULT_LANGUAGE } from "../generated/AssetParameters.js";
-import { getEffectiveAssetPath } from "../util/EffectiveAssetPath.js";
 import { getUseDefaultLanguage } from "../config/Language.js";
 
+// contains package names for which the warning has been shown
+const warningShown = new Set();
+const reportedErrors = new Set();
+
 const bundleData = new Map();
-const bundleURLs = new Map();
+const bundlePromises = new Map();
+const loaders = new Map();
 
 /**
- * Sets a map with texts and ID the are related to.
- * @param {string} packageName package ID that the i18n bundle will be related to
- * @param {Object} data an object with string locales as keys and text translataions as values
- * @public
+ *
+ * @param {string} packageName for which package this loader can fetch data
+ * @param {function} loader async function that will be passed a localeId and should return a JSON object
+ * @param {Array} localeIds Array of locale IDs that this loader can handle
  */
-const setI18nBundleData = (packageName, data) => {
+const registerI18nLoader = (packageName, localeId, loader) => {
+	// register loader by key
+	const bundleKey = `${packageName}/${localeId}`;
+	loaders.set(bundleKey, loader);
+};
+
+const _setI18nBundleData = (packageName, data) => {
 	bundleData.set(packageName, data);
 };
 
@@ -26,18 +34,36 @@ const getI18nBundleData = packageName => {
 };
 
 /**
- * Registers a map of locale/url information, to be used by the <code>fetchI18nBundle</code> method.
- * Note: In order to be able to register ".properties" files, you must import the following module:
- * import "@ui5/webcomponents-base/dist/features/PropertiesFormatSupport.js";
- *
- * @param {string} packageName package ID that the i18n bundle will be related to
- * @param {Object} bundle an object with string locales as keys and the URLs (in .json or .properties format - see the note above) where the corresponding locale can be fetched from, f.e {"en": "path/en.json", ...}
- *
  * @public
+ * @deprecated
  */
-const registerI18nBundle = (packageName, bundle) => {
-	const oldBundle = bundleURLs.get(packageName) || {};
-	bundleURLs.set(packageName, Object.assign({}, oldBundle, bundle));
+const registerI18nBundle = (_packageName, _bundle) => {
+	throw new Error("This method has been removed. Use `registerI18nLoader` instead.");
+};
+
+const _hasLoader = (packageName, localeId) => {
+	const bundleKey = `${packageName}/${localeId}`;
+	return loaders.has(bundleKey);
+};
+
+// load bundle over the network once
+const _loadMessageBundleOnce = (packageName, localeId) => {
+	const bundleKey = `${packageName}/${localeId}`;
+	const loadMessageBundle = loaders.get(bundleKey);
+
+	if (!bundlePromises.get(bundleKey)) {
+		bundlePromises.set(bundleKey, loadMessageBundle(localeId));
+	}
+
+	return bundlePromises.get(bundleKey);
+};
+
+const _showAssetsWarningOnce = packageName => {
+	if (!warningShown.has(packageName)) {
+		console.warn(`[${packageName}]: Message bundle assets are not configured. Falling back to English texts.`, /* eslint-disable-line */
+		` Add \`import "${packageName}/dist/Assets.js"\` in your bundle and make sure your build tool supports dynamic imports and JSON imports. See section "Assets" in the documentation for more information.`); /* eslint-disable-line */
+		warningShown.add(packageName);
+	}
 };
 
 /**
@@ -50,50 +76,34 @@ const registerI18nBundle = (packageName, bundle) => {
  * @public
  */
 const fetchI18nBundle = async packageName => {
-	const bundlesForPackage = bundleURLs.get(packageName);
-
-	if (!bundlesForPackage) {
-		console.warn(`Message bundle assets are not configured. Falling back to English texts.`, /* eslint-disable-line */
-		` You need to import ${packageName}/dist/Assets.js with a build tool that supports JSON imports.`); /* eslint-disable-line */
-		return;
-	}
-
 	const language = getLocale().getLanguage();
 	const region = getLocale().getRegion();
-	const useDefaultLanguage = getUseDefaultLanguage();
 	let localeId = normalizeLocale(language + (region ? `-${region}` : ``));
 
-	while (localeId !== DEFAULT_LANGUAGE && !bundlesForPackage[localeId]) {
+	while (localeId !== DEFAULT_LANGUAGE && !_hasLoader(packageName, localeId)) {
 		localeId = nextFallbackLocale(localeId);
 	}
 
-	if (useDefaultLanguage && localeId === DEFAULT_LANGUAGE) {
-		setI18nBundleData(packageName, null); // reset for the default language (if data was set for a previous language)
+	if (!_hasLoader(packageName, localeId)) {
+		_showAssetsWarningOnce(packageName);
 		return;
 	}
 
-	const bundleURL = bundlesForPackage[localeId];
-
-	if (typeof bundleURL === "object") { // inlined from build
-		setI18nBundleData(packageName, bundleURL);
+	const useDefaultLanguage = getUseDefaultLanguage();
+	if (useDefaultLanguage && localeId === DEFAULT_LANGUAGE) {
+		_setI18nBundleData(packageName, null); // reset for the default language (if data was set for a previous language)
 		return;
 	}
 
-	const content = await fetchTextOnce(getEffectiveAssetPath(bundleURL));
-	let parser;
-	if (content.startsWith("{")) {
-		parser = JSON.parse;
-	} else {
-		const PropertiesFormatSupport = getFeature("PropertiesFormatSupport");
-		if (!PropertiesFormatSupport) {
-			throw new Error(`In order to support .properties files, please: import "@ui5/webcomponents-base/dist/features/PropertiesFormatSupport.js";`);
+	try {
+		const data = await _loadMessageBundleOnce(packageName, localeId);
+		_setI18nBundleData(packageName, data);
+	} catch (e) {
+		if (!reportedErrors.has(e.message)) {
+			reportedErrors.add(e.message);
+			console.error(e.message); /* eslint-disable-line */
 		}
-		parser = PropertiesFormatSupport.parser;
 	}
-
-	const data = parser(content);
-
-	setI18nBundleData(packageName, data);
 };
 
 // When the language changes dynamically (the user calls setLanguage), re-fetch all previously fetched bundles
@@ -103,8 +113,8 @@ attachLanguageChange(() => {
 });
 
 export {
+	registerI18nLoader,
 	fetchI18nBundle,
 	registerI18nBundle,
-	setI18nBundleData,
 	getI18nBundleData,
 };
diff --git a/packages/base/src/features/PropertiesFormatSupport.js b/packages/base/src/features/PropertiesFormatSupport.js
deleted file mode 100644
index 080e59bbb9ce..000000000000
--- a/packages/base/src/features/PropertiesFormatSupport.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { registerFeature } from "../FeaturesRegistry.js";
-import parseProperties from "../util/parseProperties.js";
-
-const PropertiesFormatSupport = {
-	parser: parseProperties,
-};
-
-registerFeature("PropertiesFormatSupport", PropertiesFormatSupport);
diff --git a/packages/base/src/i18nBundle.js b/packages/base/src/i18nBundle.js
index a05308b328f0..0dc6df93ad3e 100644
--- a/packages/base/src/i18nBundle.js
+++ b/packages/base/src/i18nBundle.js
@@ -1,4 +1,4 @@
-import { registerI18nBundle, fetchI18nBundle, getI18nBundleData } from "./asset-registries/i18n.js";
+import { registerI18nLoader, fetchI18nBundle, getI18nBundleData } from "./asset-registries/i18n.js";
 import formatMessage from "./util/formatMessage.js";
 
 const I18nBundleInstances = new Map();
@@ -46,7 +46,7 @@ const getI18nBundle = packageName => {
 };
 
 export {
-	registerI18nBundle,
+	registerI18nLoader,
 	fetchI18nBundle,
 	getI18nBundle,
 };
diff --git a/packages/base/src/util/EffectiveAssetPath.js b/packages/base/src/util/EffectiveAssetPath.js
deleted file mode 100644
index fa8bdfd39c31..000000000000
--- a/packages/base/src/util/EffectiveAssetPath.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { getAssetsPath } from "../config/AssetsPath.js";
-
-let assetPathMappingFn = assetName => assetName;
-
-const getEffectiveAssetPath = assetName => {
-	if (typeof assetName !== "string") {
-		return assetName;
-	}
-
-	assetName = assetPathMappingFn(assetName);
-
-	const assetsPathPrefix = getAssetsPath();
-	if (assetsPathPrefix) {
-		return `${assetsPathPrefix}${assetName}`;
-	}
-
-	return assetName;
-};
-
-const registerAssetPathMappingFunction = mappingFn => {
-	assetPathMappingFn = mappingFn;
-};
-
-export {
-	getEffectiveAssetPath,
-	registerAssetPathMappingFunction,
-};
diff --git a/packages/base/test/assets/Themes.js b/packages/base/test/assets/Themes.js
index 4f9b213e8fe5..b3d48a25da49 100644
--- a/packages/base/test/assets/Themes.js
+++ b/packages/base/test/assets/Themes.js
@@ -1,4 +1,4 @@
-import { registerThemeProperties } from "../../asset-registries/Themes.js";
+import { registerThemePropertiesLoader } from "../../asset-registries/Themes.js";
 
 const fiori3 = `:root{ --var1: red; }`;
 const fiori3Dark = `:root{ --var1: green; }`;
@@ -8,10 +8,10 @@ const belizeHcw = `:root{ --var1: orange; }`;
 const fiori3Hcb = `:root{ --var1: yellow; }`;
 const fiori3Hcw = `:root{ --var1: yellow; }`;
 
-registerThemeProperties("@ui5/webcomponents-base-test", "sap_fiori_3", fiori3);
-registerThemeProperties("@ui5/webcomponents-base-test", "sap_fiori_3_dark", fiori3Dark);
-registerThemeProperties("@ui5/webcomponents-base-test", "sap_belize", belize);
-registerThemeProperties("@ui5/webcomponents-base-test", "sap_belize_hcb", belizeHcb);
-registerThemeProperties("@ui5/webcomponents-base-test", "sap_belize_hcw", belizeHcw);
-registerThemeProperties("@ui5/webcomponents-base-test", "sap_fiori_3_hcb", fiori3Hcb);
-registerThemeProperties("@ui5/webcomponents-base-test", "sap_fiori_3_hcw", fiori3Hcw);
+registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_fiori_3", () => fiori3);
+registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_fiori_3_dark", () => fiori3Dark);
+registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_belize", () => belize);
+registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_belize_hcb", () => belizeHcb);
+registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_belize_hcw", () => belizeHcw);
+registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_fiori_3_hcb", () => fiori3Hcb);
+registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_fiori_3_hcw", () => fiori3Hcw);
diff --git a/packages/base/test/pages/i18n.html b/packages/base/test/pages/i18n.html
index 683291466499..237760490a64 100644
--- a/packages/base/test/pages/i18n.html
+++ b/packages/base/test/pages/i18n.html
@@ -15,12 +15,7 @@
 	<script>
 
 		const demo = async () => {
-			registerI18nBundle("myApp", {
-				de: "./assets/messagebundle_de.properties",
-				es: "./assets/messagebundle_es.properties",
-				fr: "./assets/messagebundle_fr.properties",
-				en: "./assets/messagebundle_en.properties",
-			});
+			["de", "es", "fr", "en"].forEach(localeId => registerI18nLoader("myApp", localeId, () => `./assets/messagebundle_${localeId}.properties`));
 
 			await fetchI18nBundle("myApp");
 
diff --git a/packages/base/test/specs/CustomTheme.spec.js b/packages/base/test/specs/CustomTheme.spec.js
index a96b69c4efae..de0b08335391 100644
--- a/packages/base/test/specs/CustomTheme.spec.js
+++ b/packages/base/test/specs/CustomTheme.spec.js
@@ -9,7 +9,7 @@ describe("Custom themes can be registered", () => {
 		const res = browser.executeAsync( async (newTheme, done) => {
 			const var1 = "--var1: #555555";
 
-			window.registerThemeProperties("@ui5/webcomponents-base-test", newTheme, `:root{ ${var1}; }`);
+			window.registerThemePropertiesLoader("@ui5/webcomponents-base-test", newTheme, () => `:root{ ${var1}; }`);
 
 			const config = window['sap-ui-webcomponents-bundle'].configuration;
 			await config.setTheme(newTheme);
diff --git a/packages/fiori/src/Assets-static.js b/packages/fiori/src/Assets-static.js
new file mode 100644
index 000000000000..bf1e7a9d440b
--- /dev/null
+++ b/packages/fiori/src/Assets-static.js
@@ -0,0 +1,6 @@
+// main package assets (transitively base and theme-base)
+import "@ui5/webcomponents/dist/Assets-static.js";
+
+// own fiori package assets
+import "./generated/json-imports/Themes-static.js";
+import "./generated/json-imports/i18n-static.js";
diff --git a/packages/icons-tnt/package-scripts.js b/packages/icons-tnt/package-scripts.js
index e071163e85e2..772fd862c57c 100644
--- a/packages/icons-tnt/package-scripts.js
+++ b/packages/icons-tnt/package-scripts.js
@@ -8,6 +8,7 @@ const scripts = getScripts(options);
 
 // no i18n in this package
 scripts.build.i18n = "";
+scripts.build.jsonImports = "";
 
 module.exports = {
 	scripts
diff --git a/packages/icons-tnt/src/Assets-static.js b/packages/icons-tnt/src/Assets-static.js
new file mode 100644
index 000000000000..b5878e8e34e3
--- /dev/null
+++ b/packages/icons-tnt/src/Assets-static.js
@@ -0,0 +1 @@
+import "./json-imports/Icons-static.js";
diff --git a/packages/icons-tnt/src/json-imports/Icons-static.js b/packages/icons-tnt/src/json-imports/Icons-static.js
new file mode 100644
index 000000000000..ddcd25f15e5e
--- /dev/null
+++ b/packages/icons-tnt/src/json-imports/Icons-static.js
@@ -0,0 +1,13 @@
+import { registerIconLoader } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
+
+import SAPIconsTNTUrl from "../generated/assets/SAP-icons-TNT.json";
+
+const loadIconsBundle = async () => {
+	if (typeof SAPIconsTNTUrl === "object") {
+		// inlined from build
+		throw new Error("[icons-tnt] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs");
+	}
+	return (await fetch(SAPIconsTNTUrl)).json();
+}
+
+registerIconLoader("tnt", loadIconsBundle);
diff --git a/packages/icons-tnt/src/json-imports/Icons.js b/packages/icons-tnt/src/json-imports/Icons.js
index e6d149b3e311..55efaaa9d098 100644
--- a/packages/icons-tnt/src/json-imports/Icons.js
+++ b/packages/icons-tnt/src/json-imports/Icons.js
@@ -1,5 +1,11 @@
-import { registerIconBundle } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
+import { registerIconLoader } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 
-import SAPIcons from "../generated/assets/SAP-icons-TNT.json";
+const loadIconsBundle = async () => {
+	const iconData =  (await import("../generated/assets/SAP-icons-TNT.json")).default;
+    if (typeof iconData === "string" && iconData.endsWith(".json")) {
+        throw new Error("[icons-tnt] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use `import \"@ui5/webcomponents-icons-tnt/dist/Assets-static.js\". Check the \"Assets\" documentation for more information.");
+    }
+    return iconData;
+}
 
-registerIconBundle("SAP-icons-TNT", SAPIcons);
+registerIconLoader("tnt", loadIconsBundle);
diff --git a/packages/icons/jsconfig.json b/packages/icons/jsconfig.json
new file mode 100644
index 000000000000..4a7232eb5292
--- /dev/null
+++ b/packages/icons/jsconfig.json
@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+      "target": "es2017",
+      "allowSyntheticDefaultImports": false,
+      "baseUrl": "./",
+      "paths": {
+        "@ui5/webcomponents-base/dist/*": ["../base/src/*"]
+      }
+    },
+    "exclude": ["node_modules", "dist"]
+  }
\ No newline at end of file
diff --git a/packages/icons/src/Assets-static.js b/packages/icons/src/Assets-static.js
new file mode 100644
index 000000000000..737baec55783
--- /dev/null
+++ b/packages/icons/src/Assets-static.js
@@ -0,0 +1,2 @@
+import "./generated/json-imports/i18n-static.js";
+import "./json-imports/Icons-static.js";
diff --git a/packages/icons/src/Assets.js b/packages/icons/src/Assets.js
index a88e0474eb83..59c2b022265b 100644
--- a/packages/icons/src/Assets.js
+++ b/packages/icons/src/Assets.js
@@ -1,2 +1,2 @@
-import "./json-imports/i18n.js";
+import "./generated/json-imports/i18n.js";
 import "./json-imports/Icons.js";
diff --git a/packages/icons/src/json-imports/Icons-static.js b/packages/icons/src/json-imports/Icons-static.js
new file mode 100644
index 000000000000..d9d417b087df
--- /dev/null
+++ b/packages/icons/src/json-imports/Icons-static.js
@@ -0,0 +1,13 @@
+import { registerIconLoader } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
+
+import SAPIconsUrl from "../generated/assets/SAP-icons.json";
+
+const loadIconsBundle = async () => {
+	if (typeof SAPIconsUrl === "object") {
+		// inlined from build
+		throw new Error("[icons] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs");
+	}
+	return (await fetch(SAPIconsUrl)).json();
+}
+
+registerIconLoader("SAP-icons", loadIconsBundle);
diff --git a/packages/icons/src/json-imports/Icons.js b/packages/icons/src/json-imports/Icons.js
index 8c586588805a..57576631dc83 100644
--- a/packages/icons/src/json-imports/Icons.js
+++ b/packages/icons/src/json-imports/Icons.js
@@ -1,5 +1,11 @@
-import { registerIconBundle } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
+import { registerIconLoader } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 
-import SAPIcons from "../generated/assets/SAP-icons.json";
+const loadIconsBundle = async () => {
+    const iconData = (await import("../generated/assets/SAP-icons.json")).default;
+    if (typeof iconData === "string" && iconData.endsWith(".json")) {
+        throw new Error("[icons] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use `import \"@ui5/webcomponents-icons/dist/Assets-static.js\". Check the \"Assets\" documentation for more information.");
+    }
+    return iconData;
+}
 
-registerIconBundle("SAP-icons", SAPIcons);
+registerIconLoader("SAP-icons", loadIconsBundle);
\ No newline at end of file
diff --git a/packages/icons/src/json-imports/i18n.js b/packages/icons/src/json-imports/i18n.js
deleted file mode 100644
index 935b0407a967..000000000000
--- a/packages/icons/src/json-imports/i18n.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import { registerI18nBundle } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
-
-import ar from "../generated/assets/i18n/messagebundle_ar.json";
-import bg from "../generated/assets/i18n/messagebundle_bg.json";
-import ca from "../generated/assets/i18n/messagebundle_ca.json";
-import cs from "../generated/assets/i18n/messagebundle_cs.json";
-import da from "../generated/assets/i18n/messagebundle_da.json";
-import de from "../generated/assets/i18n/messagebundle_de.json";
-import el from "../generated/assets/i18n/messagebundle_el.json";
-import en from "../generated/assets/i18n/messagebundle_en.json";
-import es from "../generated/assets/i18n/messagebundle_es.json";
-import et from "../generated/assets/i18n/messagebundle_et.json";
-import fi from "../generated/assets/i18n/messagebundle_fi.json";
-import fr from "../generated/assets/i18n/messagebundle_fr.json";
-import hi from "../generated/assets/i18n/messagebundle_hi.json";
-import hr from "../generated/assets/i18n/messagebundle_hr.json";
-import hu from "../generated/assets/i18n/messagebundle_hu.json";
-import it from "../generated/assets/i18n/messagebundle_it.json";
-import iw from "../generated/assets/i18n/messagebundle_iw.json";
-import ja from "../generated/assets/i18n/messagebundle_ja.json";
-import kk from "../generated/assets/i18n/messagebundle_kk.json";
-import ko from "../generated/assets/i18n/messagebundle_ko.json";
-import lt from "../generated/assets/i18n/messagebundle_lt.json";
-import lv from "../generated/assets/i18n/messagebundle_lv.json";
-import ms from "../generated/assets/i18n/messagebundle_ms.json";
-import nl from "../generated/assets/i18n/messagebundle_nl.json";
-import no from "../generated/assets/i18n/messagebundle_no.json";
-import pl from "../generated/assets/i18n/messagebundle_pl.json";
-import pt from "../generated/assets/i18n/messagebundle_pt.json";
-import ro from "../generated/assets/i18n/messagebundle_ro.json";
-import ru from "../generated/assets/i18n/messagebundle_ru.json";
-import sh from "../generated/assets/i18n/messagebundle_sh.json";
-import sk from "../generated/assets/i18n/messagebundle_sk.json";
-import sl from "../generated/assets/i18n/messagebundle_sl.json";
-import sv from "../generated/assets/i18n/messagebundle_sv.json";
-import th from "../generated/assets/i18n/messagebundle_th.json";
-import tr from "../generated/assets/i18n/messagebundle_tr.json";
-import uk from "../generated/assets/i18n/messagebundle_uk.json";
-import vi from "../generated/assets/i18n/messagebundle_vi.json";
-import zhCN from "../generated/assets/i18n/messagebundle_zh_CN.json";
-import zhTW from "../generated/assets/i18n/messagebundle_zh_TW.json";
-
-const bundleMap = {
-	ar,
-	bg,
-	ca,
-	cs,
-	da,
-	de,
-	el,
-	en,
-	es,
-	et,
-	fi,
-	fr,
-	hi,
-	hr,
-	hu,
-	it,
-	iw,
-	ja,
-	kk,
-	ko,
-	lt,
-	lv,
-	ms,
-	nl,
-	no,
-	pl,
-	pt,
-	ro,
-	ru,
-	sh,
-	sk,
-	sl,
-	sv,
-	th,
-	tr,
-	uk,
-	vi,
-	zh_CN: zhCN,
-	zh_TW: zhTW,
-};
-
-const allEntriesInlined = Object.entries(bundleMap).every(([_key, value]) => typeof (value) === "object");
-
-/* eslint-disable */
-if (allEntriesInlined) {
-	console.warn(`Inefficient bundling detected: consider bundling i18n imports as URLs instead of inlining them.
-See rollup-plugin-url or webpack file-loader for more information.
-Suggested pattern: "assets\\\/.*\\\.json"`);
-}
-/* eslint-enable */
-
-registerI18nBundle("@ui5/webcomponents-icons", bundleMap);
diff --git a/packages/localization/lib/generate-json-imports/cldr.js b/packages/localization/lib/generate-json-imports/cldr.js
index 9e7fa59d6acf..a512e74ee292 100644
--- a/packages/localization/lib/generate-json-imports/cldr.js
+++ b/packages/localization/lib/generate-json-imports/cldr.js
@@ -5,9 +5,11 @@ const assets = require("@ui5/webcomponents-tools/assets-meta.js");
 const allLocales = assets.locales.all;
 
 const imports = allLocales.map(locale => `import ${locale} from "../assets/cldr/${locale}.json";`).join("\n");
+const caseImports = allLocales.map(locale => `\t\tcase "${locale}": return (await import("../assets/cldr/${locale}.json")).default;`).join("\n");
 const localesKeys = allLocales.join(",");
+const localesKeysStrArray = allLocales.map(_ => `"${_}"`).join(",");
 
-const content = `import { registerCldr, setCldrData } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
+const contentStatic = `import { registerLocaleDataLoader } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
 
 ${imports}
 
@@ -15,23 +17,39 @@ const cldrData = {
 	${localesKeys}
 };
 
-const allEntriesInlined = Object.entries(cldrData).every(([_key, value]) => typeof (value) === "object");
-
-if (allEntriesInlined) {
-	console.warn(\`Inefficient bundling detected: consider bundling CLDR imports as URLs instead of inlining them.
-See rollup-plugin-url or webpack file-loader for more information.
-Suggested pattern: "assets\\\\\\/.*\\\\\\.json"\`);
+const fetchCldrJson = async (localeId) => {
+	if (typeof cldrData[localeId] === "object") {
+		// inlined from build
+		throw new Error("[LocaleData] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs")
+	}
+	return (await fetch(cldrData[localeId])).json();
 }
 
+Object.keys(cldrData).forEach(localeId => registerLocaleDataLoader(localeId, fetchCldrJson));
+`;
+
+const contentDynamic = `import { registerLocaleDataLoader } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
+
+const availableLocales = [${localesKeysStrArray}];
 
-Object.entries(cldrData).forEach(([key, value]) => {
-	if (typeof (value) === "object") {
-		setCldrData(key, value);
-	} else {
-		registerCldr(key, value);
+const importCldrJson = async (localeId) => {
+	switch (localeId) {
+${caseImports}
+		default: throw "unknown locale"
 	}
-});
+}
+
+const importAndCheck = async (localeId) => {
+	const data = await importCldrJson(localeId);
+	if (typeof data === "string" && data.endsWith(".json")) {
+        throw new Error(\`[LocaleData] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use 'import ".../Assets-static.js"'. Check the \"Assets\" documentation for more information.\`);
+	}
+	return data;
+}
+
+availableLocales.forEach(localeId => registerLocaleDataLoader(localeId, importAndCheck));
 `;
 
 mkdirp.sync("dist/generated/json-imports/");
-fs.writeFileSync("dist/generated/json-imports/LocaleData.js", content);
+fs.writeFileSync("dist/generated/json-imports/LocaleData-static.js", contentStatic);
+fs.writeFileSync("dist/generated/json-imports/LocaleData.js", contentDynamic);
diff --git a/packages/localization/src/Assets-static.js b/packages/localization/src/Assets-static.js
new file mode 100644
index 000000000000..6d083ff01773
--- /dev/null
+++ b/packages/localization/src/Assets-static.js
@@ -0,0 +1,2 @@
+// Currently the base package provides CLDR assets only
+import "./generated/json-imports/LocaleData-static.js";
diff --git a/packages/localization/src/sap/base/util/LoaderExtensions.js b/packages/localization/src/sap/base/util/LoaderExtensions.js
index 518a39e210f7..301dfb502c32 100644
--- a/packages/localization/src/sap/base/util/LoaderExtensions.js
+++ b/packages/localization/src/sap/base/util/LoaderExtensions.js
@@ -1,7 +1,17 @@
-import { getModuleContent } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
+import { getLocaleData } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
+
+const loadResource = moduleName => {
+	const moduleFormat = moduleName.match(/sap\/ui\/core\/cldr\/(\w+)\.json/);
+	if (!moduleFormat) {
+		throw new Error(`Unknown module "${moduleName}"`);
+	}
+
+	const localeId = moduleFormat[1];
+	return getLocaleData(localeId);
+};
 
 const LoaderExtensions = {
-	loadResource: getModuleContent,
+	loadResource,
 };
 
 export default LoaderExtensions;
diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js
index a98f4d311b4c..05d07781d4f1 100644
--- a/packages/main/bundle.esm.js
+++ b/packages/main/bundle.esm.js
@@ -2,11 +2,6 @@ import { getAssetsPath, setAssetsPath } from "@ui5/webcomponents-base/dist/confi
 // setAssetsPath("/my-resources/");
 
 import { addCustomCSS, attachThemeLoaded, detachThemeLoaded } from "@ui5/webcomponents-base/dist/Theming";
-/*
-attachThemeLoaded(theme => {
-	console.log("Theme load complete: ", theme);
-});
-*/
 
 // OpenUI5 integration
 import "@ui5/webcomponents-base/dist/features/OpenUI5Support.js";
@@ -20,22 +15,27 @@ import "@ui5/webcomponents-localization/dist/features/calendar/Persian.js";
 // CLDR
 import getLocaleData from "@ui5/webcomponents-localization/dist/locale/getLocaleData.js";
 
-// Icons
-import "@ui5/webcomponents-icons/dist/Assets.js";
-import "@ui5/webcomponents-icons-tnt/dist/Assets.js";
+// Uncomment to test the registration of custom properties and JSON bundles - use the TextArea test page
+// import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
+// import parse from "@ui5/webcomponents-base/dist/PropertiesFileFormat.js";
+
+// const bg = "https://ui5.sap.com/resources/sap/ui/core/messagebundle_bg.properties";
+// registerI18nLoader("@ui5/webcomponents", "bg", async (localeId) => {
+// 	const props = await (await fetch(bg)).text();
+// 	return parse(props);;
+// });
+// registerI18nLoader("@ui5/webcomponents", "fr", async (localeId) => {
+// 	return await (await fetch("fr")).json();
+// });
 
-/* Uncomment to test the registration of custom properties and JSON bundles - use the TextArea test page
-import { registerI18nBundle } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
-import "@ui5/webcomponents-base/dist/features/PropertiesFormatSupport.js";
-registerI18nBundle("@ui5/webcomponents", {
-	bg: "./lang/messagebundle_bg.properties",
-	fr: "./lang/fr.json",
-});
-*/
 
-// asset helpers (needs correct json as url in rollup.config.js)
+// asset helpers (needs correct json plugin in rollup.config.js)
 import "./dist/Assets.js";
 
+// Icons
+import "@ui5/webcomponents-icons/dist/Assets.js";
+import "@ui5/webcomponents-icons-tnt/dist/Assets.js";
+
 import "./dist/features/InputElementsFormSupport.js";
 import "./dist/features/InputSuggestions.js";
 
@@ -105,7 +105,7 @@ import { getLanguage, setLanguage } from "@ui5/webcomponents-base/dist/config/La
 import { setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
 import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
-import { getRegisteredNames as getIconNames } from  "@ui5/webcomponents-base/dist/SVGIconRegistry.js";
+import { _getRegisteredNames as getIconNames } from  "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.js";
 import { attachDirectionChange } from "@ui5/webcomponents-base/dist/locale/directionChange.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
diff --git a/packages/main/src/Assets-static.js b/packages/main/src/Assets-static.js
new file mode 100644
index 000000000000..28436353ad4a
--- /dev/null
+++ b/packages/main/src/Assets-static.js
@@ -0,0 +1,6 @@
+import "@ui5/webcomponents-localization/dist/Assets-static.js"; // CLDR
+import "@ui5/webcomponents-theme-base/dist/Assets-static.js"; // Theming
+
+// own main package assets
+import "./generated/json-imports/Themes-static.js";
+import "./generated/json-imports/i18n-static.js";
diff --git a/packages/main/src/Icon.js b/packages/main/src/Icon.js
index bdd0673d7cf1..3825c530df63 100644
--- a/packages/main/src/Icon.js
+++ b/packages/main/src/Icon.js
@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getIconData, getIconDataSync } from "@ui5/webcomponents-base/dist/SVGIconRegistry.js";
+import { getIconData, getIconDataSync } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 import createStyleInHead from "@ui5/webcomponents-base/dist/util/createStyleInHead.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
diff --git a/packages/main/test/pages/Icon.html b/packages/main/test/pages/Icon.html
index f195423869a1..6f9ef42b1651 100644
--- a/packages/main/test/pages/Icon.html
+++ b/packages/main/test/pages/Icon.html
@@ -54,35 +54,15 @@
 	<br />
 
 	<ui5-date-picker style="margin-top: 10px" placeholder="test" value="Value State None">
-		<ui5-icon
-			slot="icon"
-			name="add-employee"
-			tabindex="-1"
-		></ui5-icon>
 	</ui5-date-picker>
 
 	<ui5-date-picker style="margin-top: 10px" value-state="Success" value="Value State Success">
-		<ui5-icon
-			slot="icon"
-			name="add-employee"
-			tabindex="-1"
-		></ui5-icon>
 	</ui5-date-picker>
 
 	<ui5-date-picker style="margin-top: 10px" value-state="Warning" value="Value State Warning">
-		<ui5-icon
-			slot="icon"
-			name="add-employee"
-			tabindex="-1"
-		></ui5-icon>
 	</ui5-date-picker>
 
 	<ui5-date-picker style="margin-top: 10px" value-state="Error" value="Value State Error">
-		<ui5-icon
-			slot="icon"
-			name="add-employee"
-			tabindex="-1"
-		></ui5-icon>
 	</ui5-date-picker>
 
 	<br/><br/>
diff --git a/packages/main/test/pages/OpenUI5.html b/packages/main/test/pages/OpenUI5.html
index f7426871d631..2f15912adb1e 100644
--- a/packages/main/test/pages/OpenUI5.html
+++ b/packages/main/test/pages/OpenUI5.html
@@ -44,7 +44,7 @@
 <body style="background-color: var(--sapBackgroundColor);">
 
 <ui5-button icon="download">Web Component</ui5-button>
-
+<ui5-datepicker></ui5-datepicker>
 
 <div id='content'></div>
 
diff --git a/packages/theme-base/src/Assets-static.js b/packages/theme-base/src/Assets-static.js
new file mode 100644
index 000000000000..7db77620dde6
--- /dev/null
+++ b/packages/theme-base/src/Assets-static.js
@@ -0,0 +1,2 @@
+// The theme-base package provides theming assets only
+import "./generated/json-imports/Themes-static.js";
diff --git a/packages/tools/components-package/nps.js b/packages/tools/components-package/nps.js
index 39d60ba5132b..b95a3b52c32c 100644
--- a/packages/tools/components-package/nps.js
+++ b/packages/tools/components-package/nps.js
@@ -11,7 +11,8 @@ const getScripts = (options) => {
 
 	const scripts = {
 		clean: "rimraf dist",
-		lint: "eslint . --config config/.eslintrc.js",
+		lint: "",
+		lintfix: "eslint . --config config/.eslintrc.js --fix",
 		prepare: "nps clean build.templates build.styles build.i18n build.jsonImports copy build.samples",
 		build: {
 			default: "nps lint prepare build.bundle",
@@ -39,14 +40,16 @@ const getScripts = (options) => {
 			}
 		},
 		copy: {
-			default: "nps copy.src copy.test copy.webcomponents-polyfill",
+			default: "nps copy.src copy.props copy.test copy.webcomponents-polyfill",
 			src: `node "${LIB}/copy-and-watch/index.js" "src/**/*.js" dist/`,
+			props: `node "${LIB}/copy-and-watch/index.js" "src/**/*.properties" dist/`,
 			test: `node "${LIB}/copy-and-watch/index.js" "test/**/*.*" dist/test-resources`,
 			"webcomponents-polyfill": `node "${LIB}/copy-and-watch/index.js" "${polyfillPath}" dist/webcomponentsjs/`,
 		},
 		watch: {
 			default: 'concurrently "nps watch.templates" "nps watch.samples" "nps watch.test" "nps watch.src" "nps watch.bundle" "nps watch.styles"',
 			src: 'nps "copy.src --watch --safe --skip-initial-copy"',
+			props: 'nps "copy.props --watch --safe --skip-initial-copy"',
 			test: 'nps "copy.test --watch --safe --skip-initial-copy"',
 			bundle: "rollup --config config/rollup.config.js -w --environment ES5_BUILD,DEV,DEPLOY_PUBLIC_PATH:/resources/",
 			styles: {
@@ -81,7 +84,7 @@ const getScripts = (options) => {
 				replace: `node "${LIB}/scoping/scope-test-pages.js" dist/test-resources/scoped demo`,
 			},
 			dev: 'concurrently "nps serve" "nps scope.watch"',
-			watch: 'concurrently "nps watch.templates" "nps watch.samples" "nps watch.test" "nps watch.src" "nps scope.bundle" "nps watch.styles"',
+			watch: 'concurrently "nps watch.templates" "nps watch.samples" "nps watch.test" "nps watch.src" "nps watch.props" "nps scope.bundle" "nps watch.styles"',
 			bundle: "rollup --config config/rollup.config.js -w --environment ES5_BUILD,DEV,SCOPE"
 		}
 	};
diff --git a/packages/tools/components-package/rollup.js b/packages/tools/components-package/rollup.js
index ae0935c64855..8d7ce2cf319d 100644
--- a/packages/tools/components-package/rollup.js
+++ b/packages/tools/components-package/rollup.js
@@ -5,6 +5,7 @@ const { babel } = require("@rollup/plugin-babel");
 const { nodeResolve } = require("@rollup/plugin-node-resolve");
 const url = require("@rollup/plugin-url");
 const { terser } = require("rollup-plugin-terser");
+const json = require("@rollup/plugin-json");
 const notify = require('rollup-plugin-notify');
 const filesize = require('rollup-plugin-filesize');
 const livereload = require('rollup-plugin-livereload');
@@ -38,16 +39,24 @@ const getPlugins = ({ transpile }) => {
 
 	plugins.push(ui5DevImportCheckerPlugin());
 
-	plugins.push(url({
-		limit: 0,
+	// comment out json plugin when testing static imports
+	plugins.push(json({
 		include: [
-			/.*assets\/.*\.json/
+			/.*assets\/.*\.json/,
 		],
-		emitFiles: true,
-		fileName: "[name].[hash][extname]",
-		publicPath,
+		namedExports: false,
 	}));
 
+	// uncomment when testing static resources
+	// plugins.push(url({
+	// 	limit: 0,
+	// 	include: [
+	// 		/.*assets\/.*\.json/,
+	// 	],
+	// 	emitFiles: true,
+	// 	fileName: "[name].[hash][extname]",
+	// 	publicPath,
+	// }));
 
 	if (transpile) {
 		plugins.push(babel({
diff --git a/packages/tools/icons-collection/nps.js b/packages/tools/icons-collection/nps.js
index 6574aa250429..0a000590570b 100644
--- a/packages/tools/icons-collection/nps.js
+++ b/packages/tools/icons-collection/nps.js
@@ -12,12 +12,16 @@ const getScripts = (options) => {
 			"icon-collection": `node "${LIB}/copy-and-watch/index.js" "src/*.json" dist/generated/assets/`
 		},
 		build: {
-			default: "nps clean copy build.i18n build.icons",
+			default: "nps clean copy build.i18n build.icons build.jsonImports",
 			i18n: {
 				default: "nps build.i18n.defaultsjs build.i18n.json",
 				defaultsjs: `mkdirp dist/generated/i18n && node "${LIB}/i18n/defaults.js" src/i18n dist/generated/i18n`,
 				json: `mkdirp dist/generated/assets/i18n && node "${LIB}/i18n/toJSON.js" src/i18n dist/generated/assets/i18n`,
 			},
+			jsonImports: {
+				default: "mkdirp dist/generated/json-imports && nps build.jsonImports.i18n",
+				i18n: `node "${LIB}/generate-json-imports/i18n.js" dist/generated/assets/i18n dist/generated/json-imports`,
+			},
 			icons: `node "${LIB}/create-icons/index.js" "${options.collectionName}"`,
 		}
 	};
diff --git a/packages/tools/lib/create-icons/index.js b/packages/tools/lib/create-icons/index.js
index d118f72f4a8e..5d2f30c8e975 100644
--- a/packages/tools/lib/create-icons/index.js
+++ b/packages/tools/lib/create-icons/index.js
@@ -8,7 +8,7 @@ const destDir = path.normalize("dist/");
 
 mkdirp.sync(destDir);
 
-const template = (name, pathData, ltr, collection) => `import { registerIcon } from "@ui5/webcomponents-base/dist/SVGIconRegistry.js";
+const template = (name, pathData, ltr, collection) => `import { registerIcon } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 
 const name = "${name}";
 const pathData = "${pathData}";
@@ -20,7 +20,7 @@ registerIcon(name, { pathData, ltr, collection});
 export default { pathData };`;
 
 
-const accTemplate = (name, pathData, ltr, accData, collection) => `import { registerIcon } from "@ui5/webcomponents-base/dist/SVGIconRegistry.js";
+const accTemplate = (name, pathData, ltr, accData, collection) => `import { registerIcon } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 import { ${accData.key} } from "./generated/i18n/i18n-defaults.js";
 
 const name = "${name}";
diff --git a/packages/tools/lib/generate-json-imports/i18n.js b/packages/tools/lib/generate-json-imports/i18n.js
index f3cfa631fa22..a13c161857d3 100644
--- a/packages/tools/lib/generate-json-imports/i18n.js
+++ b/packages/tools/lib/generate-json-imports/i18n.js
@@ -5,7 +5,8 @@ const mkdirp = require("mkdirp");
 const packageName = JSON.parse(fs.readFileSync("package.json")).name;
 
 const inputFolder = path.normalize(process.argv[2]);
-const outputFile = path.normalize(`${process.argv[3]}/i18n.js`);
+const outputFile = path.normalize(`${process.argv[3]}/i18n-static.js`);
+const outputFileDynamic = path.normalize(`${process.argv[3]}/i18n.js`);
 
 // All languages present in the file system
 const files = fs.readdirSync(inputFolder);
@@ -14,22 +15,23 @@ const languages = files.map(file => {
 	return matches ? matches[1] : undefined;
 }).filter(key => !!key);
 
-let content;
+let contentStatic, contentDynamic;
 
 // No i18n - just import dependencies, if any
 if (languages.length === 0) {
-  content = ``;
+  contentStatic = "";
+  contentDynamic = "";
 // There is i18n - generate the full file
 } else {
+	// Keys for the array
+	const languagesKeysString = languages.map(key => `${key},`).join("\n\t");
+	const languagesKeysStringArray = languages.map(key => `"${key}",`).join("\n\t");
 
-// Keys for the array
-const languagesKeysString = languages.map(key => `${key},`).join("\n\t");
+	// Actual imports for json assets
+	const assetsImportsString = languages.map(key => `import ${key} from "../assets/i18n/messagebundle_${key}.json";`).join("\n");
 
-// Actual imports for json assets
-const assetsImportsString = languages.map(key => `import ${key} from "../assets/i18n/messagebundle_${key}.json";`).join("\n");
-
-// Resulting file content
-content = `import { registerI18nBundle } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
+	// static imports
+	contentStatic = `import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
 
 ${assetsImportsString}
 
@@ -37,17 +39,53 @@ const bundleMap = {
 	${languagesKeysString}
 };
 
-const allEntriesInlined = Object.entries(bundleMap).every(([_key, value]) => typeof (value) === "object");
-
-if (allEntriesInlined) {
-	console.warn(\`Inefficient bundling detected: consider bundling i18n imports as URLs instead of inlining them.
-See rollup-plugin-url or webpack file-loader for more information.
-Suggested pattern: "assets\\\\\\/.*\\\\\\.json"\`);
+const fetchMessageBundle = async (localeId) => {
+	if (typeof bundleMap[localeId] === "object") {
+		// inlined from build
+		throw new Error("[i18n] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs")
+	}
+	return (await fetch(bundleMap[localeId])).json()
 }
 
-registerI18nBundle("${packageName}", bundleMap);
+const localeIds = [${languagesKeysStringArray}];
+
+localeIds.forEach(localeId => {
+	registerI18nLoader("${packageName}", localeId, fetchMessageBundle);
+});
 `;
+
+	// Actual imports for json assets
+	const dynamicImportsString = languages.map(key => `		case "${key}": return (await import("../assets/i18n/messagebundle_${key}.json")).default;`).join("\n");
+
+	// Resulting file content
+	contentDynamic = `import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
+
+	const importMessageBundle = async (localeId) => {
+		switch (localeId) {
+	${dynamicImportsString}
+			default: throw "unknown locale"
+		}
+	}
+
+	const importAndCheck = async (localeId) => {
+		const data = await importMessageBundle(localeId);
+		if (typeof data === "string" && data.endsWith(".json")) {
+			throw new Error(\`[i18n] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use 'import ".../Assets-static.js"'. Check the \"Assets\" documentation for more information.\`);
+		}
+		return data;
+	}
+
+	const localeIds = [${languagesKeysStringArray}];
+
+	localeIds.forEach(localeId => {
+		registerI18nLoader("${packageName}", localeId, importAndCheck);
+	});
+	`;
+
+
 }
 
+
 mkdirp.sync(path.dirname(outputFile));
-fs.writeFileSync(outputFile, content);
+fs.writeFileSync(outputFile, contentStatic);
+fs.writeFileSync(outputFileDynamic, contentDynamic);
diff --git a/packages/tools/lib/generate-json-imports/themes.js b/packages/tools/lib/generate-json-imports/themes.js
index 0d8577d705c4..ab0bb08d857a 100644
--- a/packages/tools/lib/generate-json-imports/themes.js
+++ b/packages/tools/lib/generate-json-imports/themes.js
@@ -4,7 +4,8 @@ const mkdirp = require("mkdirp");
 const assets = require("../../assets-meta.js");
 
 const inputFolder = path.normalize(process.argv[2]);
-const outputFile = path.normalize(`${process.argv[3]}/Themes.js`);
+const outputFile = path.normalize(`${process.argv[3]}/Themes-static.js`);
+const outputFileDynamic = path.normalize(`${process.argv[3]}/Themes.js`);
 
 // All supported optional themes
 const optionalThemes = assets.themes.all.filter(theme => theme !== assets.themes.default);
@@ -19,24 +20,54 @@ const themesOnFileSystem = dirs.map(dir => {
 const packageName = JSON.parse(fs.readFileSync("package.json")).name;
 
 const importLines = themesOnFileSystem.map(theme => `import ${theme} from "../assets/themes/${theme}/parameters-bundle.css.json";`).join("\n");
-const isInlinedCondition = themesOnFileSystem.map(theme => `isInlined(${theme})`).join(" || ");
-const registerLines = themesOnFileSystem.map(theme => `registerThemeProperties("${packageName}", "${theme}", ${theme});`).join("\n");
+const themeUrlsByName = "{\n" + themesOnFileSystem.join(",\n") + "\n}";
+const availableThemesArray = `[${themesOnFileSystem.map(theme => `"${theme}"`).join(", ")}]`;
+const dynamicImportLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import("../assets/themes/${theme}/parameters-bundle.css.json")).default;`).join("\n");
 
-// Resulting file content
-const content = `import { registerThemeProperties } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+
+// static imports file content
+const contentStatic = `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
 
 ${importLines}
 
+const themeUrlsByName = ${themeUrlsByName};
 const isInlined = obj => typeof (obj) === "object";
 
-if (${isInlinedCondition}) {
-	console.warn(\`Inefficient bundling detected: consider bundling theme properties imports as URLs instead of inlining them.
-See rollup-plugin-url or webpack file-loader for more information.
-Suggested pattern: "assets\\\\\\/.*\\\\\\.json"\`);
+const loadThemeProperties = async (themeName) => {
+	if (typeof themeUrlsByName[themeName] === "object") {
+		// inlined from build
+		throw new Error("[themes] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs");
+	}
+	return (await fetch(themeUrlsByName[themeName])).json();
+}
+
+${availableThemesArray}
+  .forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadThemeProperties));
+`;
+
+
+// dynamic imports file content
+const contentDynamic = `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+
+const loadThemeProperties = async (themeName) => {
+	switch (themeName) {
+${dynamicImportLines}
+		default: throw "unknown theme"
+	}
+}
+
+const loadAndCheck = async (themeName) => {
+	const data = await loadThemeProperties(themeName);
+	if (typeof data === "string" && data.endsWith(".json")) {
+		throw new Error(\`[themes] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use 'import ".../Assets-static.js"'. Check the \"Assets\" documentation for more information.\`);
+	}
+	return data;
 }
 
-${registerLines}
+${availableThemesArray}
+  .forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadAndCheck));
 `;
 
 mkdirp.sync(path.dirname(outputFile));
-fs.writeFileSync(outputFile, content);
+fs.writeFileSync(outputFile, contentStatic);
+fs.writeFileSync(outputFileDynamic, contentDynamic);
diff --git a/packages/tools/lib/postcss-css-to-esm/index.js b/packages/tools/lib/postcss-css-to-esm/index.js
index 75531c3aafc3..92b8d702512e 100644
--- a/packages/tools/lib/postcss-css-to-esm/index.js
+++ b/packages/tools/lib/postcss-css-to-esm/index.js
@@ -7,13 +7,13 @@ const assets = require("../../assets-meta.js");
 const DEFAULT_THEME = assets.themes.default;
 
 const getDefaultThemeCode = packageName => {
-	return `import { registerThemeProperties } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
+	return `import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
 
 import defaultThemeBase from "@ui5/webcomponents-theme-base/dist/generated/themes/${DEFAULT_THEME}/parameters-bundle.css.js";
 import defaultTheme from "./${DEFAULT_THEME}/parameters-bundle.css.js";
 
-registerThemeProperties("@ui5/webcomponents-theme-base", "${DEFAULT_THEME}", defaultThemeBase);
-registerThemeProperties("${packageName}", "${DEFAULT_THEME}", defaultTheme);
+registerThemePropertiesLoader("@ui5/webcomponents-theme-base", "${DEFAULT_THEME}", () => defaultThemeBase);
+registerThemePropertiesLoader("${packageName}", "${DEFAULT_THEME}", () => defaultTheme);
 `;
 };
 
diff --git a/packages/tools/package.json b/packages/tools/package.json
index 25133c743d35..7d99f9feb41d 100644
--- a/packages/tools/package.json
+++ b/packages/tools/package.json
@@ -27,6 +27,7 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
     "@babel/preset-env": "^7.1.0",
     "@rollup/plugin-babel": "^5.2.1",
+    "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-url": "^5.0.1",
     "@wdio/cli": "^6.1.3",
diff --git a/yarn.lock b/yarn.lock
index a0a1a042f0ff..77d71fa08f0a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -759,6 +759,13 @@
     "@babel/helper-module-imports" "^7.10.4"
     "@rollup/pluginutils" "^3.1.0"
 
+"@rollup/plugin-json@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-json/-/plugin-json-4.1.0.tgz#54e09867ae6963c593844d8bd7a9c718294496f3"
+  integrity sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==
+  dependencies:
+    "@rollup/pluginutils" "^3.0.8"
+
 "@rollup/plugin-node-resolve@^9.0.0":
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-9.0.0.tgz#39bd0034ce9126b39c1699695f440b4b7d2b62e6"
@@ -780,7 +787,7 @@
     make-dir "^3.0.0"
     mime "^2.4.4"
 
-"@rollup/pluginutils@^3.0.4", "@rollup/pluginutils@^3.1.0":
+"@rollup/pluginutils@^3.0.4", "@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
   integrity sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==