diff --git a/packages/common/README.md b/packages/common/README.md
index 70e9ac52f34cda4d48686a7c60c1585a62b180fb..212f20cbdf88a574f57327a97d5339330439d950 100644
--- a/packages/common/README.md
+++ b/packages/common/README.md
@@ -13,3 +13,10 @@ For valid icon names see: [LineIcons](https://lineicons.com/icons/)
 ```html
  <dbp-icon color="orange" name="menu-down"></dbp-icon>
 ```
+
+### Exposed CSS variables
+
+Variables like `--dbp-override-icon-<icon-name>` can be used to override the icons.
+
+Example CSS: `html { --dbp-override-icon-cloud: url(/icons/cloud.svg); }`
+
diff --git a/packages/common/package.json b/packages/common/package.json
index 77b7e765057c8041a0851ee5f59d7ac9c3f721b5..d9519526509d8f58a40c8d678ce8e76a72b5ae43 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@dbp-toolkit/common",
   "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/common",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "module": "index.js",
   "license": "LGPL-2.1-or-later",
   "repository": {
diff --git a/packages/file-handling/README.md b/packages/file-handling/README.md
index 0521df16753bdf4894a7a67bbbc9d1f2b0ec43ee..50a9811e26cf8923582c6585d4739c08cb1855d6 100644
--- a/packages/file-handling/README.md
+++ b/packages/file-handling/README.md
@@ -104,11 +104,15 @@ This event is sent if a file was selected.
 This event is sent if multiple files are selected.
 
 #### `dbp-nextcloud-file-picker-number-files`
+
 This event is sent from nextcloudfilepicker and is send when files are picked and sends the number of selected files
 
+**Payload**: `{'file': File}` where [File](https://developer.mozilla.org/en-US/docs/Web/API/File) is the binary file that was selected
 
+### Exposed CSS variables
 
-**Payload**: `{'file': File}` where [File](https://developer.mozilla.org/en-US/docs/Web/API/File) is the binary file that was selected
+- `--dbp-override-image-nextcloud` is used to override the cloud image on the connection screen
+  - example CSS: `html { --dbp-override-image-nextcloud: url(/icons/nextcloud.svg); }`
 
 ## FileSink
 
@@ -162,6 +166,11 @@ The component emits a `dbp-set-property` event for the attribute `initial-file-h
     - if the property is set the dialog opens
     - example: `document.querySelector("dbp-file-sink").files = [file]` where `file` is your File object
 
+### Exposed CSS variables
+
+- `--dbp-override-image-nextcloud` is used to override the cloud image on the connection screen
+  - example CSS: `html { --dbp-override-image-nextcloud: url(/icons/nextcloud.svg); }`
+
 ## Local development
 
 ```bash
diff --git a/packages/file-handling/package.json b/packages/file-handling/package.json
index 809b8becb16410383b4b7556d69495c7893604ad..c77e5862097d540f662cef8bf5c57cca675527f1 100644
--- a/packages/file-handling/package.json
+++ b/packages/file-handling/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@dbp-toolkit/file-handling",
   "homepage": "https://gitlab.tugraz.at/dbp/web-components/toolkit/-/tree/master/packages/file-handling",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "main": "src/index.js",
   "license": "LGPL-2.1-or-later",
   "repository": {