diff --git a/packages/icon/demo/usage.html b/packages/icon/demo/usage.html
index e8ecf06..a4ca53a 100644
--- a/packages/icon/demo/usage.html
+++ b/packages/icon/demo/usage.html
@@ -32,18 +32,80 @@
 			}
 		</style>
 		<script>
-			IconifyPreload = [
-				{
+			// Add icon before loading component: it will be added to IconifyPreload global
+			(() => {
+				// Universal loader example
+				function add(data) {
+					// Try iconify-icon
+					try {
+						window.customElements
+							.get('iconify-icon')
+							.addCollection(data);
+					} catch (err) {
+						// Try SVG framework
+						try {
+							window.Iconify.addCollection(data);
+						} catch (err) {
+							// Add to global preload variable
+							try {
+								(
+									window.IconifyPreload ||
+									(window.IconifyPreload = [])
+								).push(data);
+							} catch (err) {}
+						}
+					}
+				}
+
+				add({
 					prefix: 'test',
 					icons: {
 						icon: {
 							body: '<mask id="coffee-mask" x="0" y="0" width="16" height="16"><g fill="white"><path d="M5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M8.5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M12-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4" stroke="white" stroke-width="1" fill="none"><animateMotion path="M0 0v-8" calcMode="linear" dur="3s" repeatCount="indefinite" /></path></g><rect y="4" width="16" height="12" fill="black" /><path d="M2 5H13C14.1046 5 15 5.89543 15 7V8C15 9.10457 14.1046 10 13 10H12V14C12 15.1046 11.1046 16 10 16H4C2.89543 16 2 15.1046 2 14V5Z" fill="white" /><path d="M12 6H13C13.5523 6 14 6.44772 14 7V8C14 8.55228 13.5523 9 13 9H12V6Z" fill="black" /></mask><rect mask="url(#coffee-mask)" width="16" height="16" fill="currentColor" />',
 						},
 					},
-				},
-			];
+				});
+			})();
 		</script>
 		<script src="../dist/iconify-icon.min.js"></script>
+		<script>
+			// Add icon after loading icon component: it will be added using IconifyIcon static method addCollection()
+			(() => {
+				// Universal loader example
+				function add(data) {
+					// Try iconify-icon
+					try {
+						window.customElements
+							.get('iconify-icon')
+							.addCollection(data);
+						return;
+					} catch (err) {}
+
+					// Try SVG framework
+					try {
+						window.Iconify.addCollection(data);
+						return;
+					} catch (err) {}
+
+					// Add to global preload variable
+					try {
+						(
+							window.IconifyPreload ||
+							(window.IconifyPreload = [])
+						).push(data);
+					} catch (err) {}
+				}
+
+				add({
+					prefix: 'test2',
+					icons: {
+						icon: {
+							body: '<mask id="coffee-mask" x="0" y="0" width="16" height="16"><g fill="white"><path d="M5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M8.5-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4M12-2c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4" stroke="white" stroke-width="1" fill="none"><animateMotion path="M0 0v-8" calcMode="linear" dur="3s" repeatCount="indefinite" /></path></g><rect y="4" width="16" height="12" fill="black" /><path d="M2 5H13C14.1046 5 15 5.89543 15 7V8C15 9.10457 14.1046 10 13 10H12V14C12 15.1046 11.1046 16 10 16H4C2.89543 16 2 15.1046 2 14V5Z" fill="white" /><path d="M12 6H13C13.5523 6 14 6.44772 14 7V8C14 8.55228 13.5523 9 13 9H12V6Z" fill="black" /></mask><rect mask="url(#coffee-mask)" width="16" height="16" fill="currentColor" />',
+						},
+					},
+				});
+			})();
+		</script>
 	</head>
 	<body>
 		<p>
@@ -166,7 +228,7 @@
 			></iconify-icon>
 		</p>
 		<p>
-			Flip:
+			Flip (8 icons):
 			<iconify-icon inline icon="test:icon"></iconify-icon>
 			<iconify-icon inline icon="test:icon" mode="style"></iconify-icon>
 			<iconify-icon
@@ -182,23 +244,23 @@
 			></iconify-icon>
 			<iconify-icon
 				inline
-				icon="test:icon"
+				icon="test2:icon"
 				flip="vertical"
 			></iconify-icon>
 			<iconify-icon
 				inline
-				icon="test:icon"
+				icon="test2:icon"
 				flip="vertical"
 				mode="style"
 			></iconify-icon>
 			<iconify-icon
 				inline
-				icon="test:icon"
+				icon="test2:icon"
 				flip="horizontal,vertical"
 			></iconify-icon>
 			<iconify-icon
 				inline
-				icon="test:icon"
+				icon="test2:icon"
 				flip="horizontal,vertical"
 				mode="style"
 			></iconify-icon>
