diff --git a/src/main/resources/languages/base_de.properties b/src/main/resources/languages/base_de.properties
index 26c727eacbf493bef8c945902060e8fb7418dfb1..140ca2593659fd67a9d4c17a904590605434446a 100644
--- a/src/main/resources/languages/base_de.properties
+++ b/src/main/resources/languages/base_de.properties
@@ -261,6 +261,7 @@ settings.search.itemsPerPage=Anzahl der Suchergebnisse pro Seite
 
 account.new.label.name=Name
 account.new.label.icon=Icon
+account.new.icon.placeholder=Hier klicken um ein Icon auszuwählen
 account.default.name=Standardkonto
 account.all=Alle Konten
 account.budget.asof=Stand
diff --git a/src/main/resources/languages/base_en.properties b/src/main/resources/languages/base_en.properties
index 626faad57116feb43ceeb8688701e1d22bacb00c..9bff555fd309451fd5e5ed58bad46d3e54dbca52 100644
--- a/src/main/resources/languages/base_en.properties
+++ b/src/main/resources/languages/base_en.properties
@@ -261,6 +261,7 @@ settings.search.itemsPerPage=Number of search results per page
 
 account.new.label.name=Name
 account.new.label.icon=Icon
+account.new.icon.placeholder=Click here to select an icon
 account.default.name=Default Account
 account.all=All Accounts
 account.budget.asof=as of
diff --git a/src/main/resources/static/css/accounts.css b/src/main/resources/static/css/accounts.css
new file mode 100644
index 0000000000000000000000000000000000000000..c41f0263ef3b4bbb51f2647cdf870354724fe283
--- /dev/null
+++ b/src/main/resources/static/css/accounts.css
@@ -0,0 +1,19 @@
+#account-icon {
+    margin-top: 3rem;
+    justify-content: center;
+}
+
+#account-icon-preview {
+    text-align: center;
+    border: 2px solid var(--color-text);
+    padding: 1rem;
+    color: var(--color-text);
+}
+
+#button-remove-account-icon {
+    margin-left: 1rem;
+}
+
+#button-remove-account-icon i {
+    font-size: 1.8rem;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index ad5768c8c84f3ba5a4c6b9eac38683e1bde160ad..5a0116ed600c662feb9a42b8c89f8d4f7bd0eb3c 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -437,6 +437,10 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
     height: 2.6rem;
 }
 
+.account-icon-preview  {
+    height: 5rem;
+}
+
 .tooltipped:hover {
     cursor: pointer;
 }
diff --git a/src/main/resources/static/js/accounts.js b/src/main/resources/static/js/accounts.js
index b3ca4b9a0c7f12e64986f3688714640e088ff952..ff2a9eb8de38859ba18b4c3b4432327177addf28 100644
--- a/src/main/resources/static/js/accounts.js
+++ b/src/main/resources/static/js/accounts.js
@@ -14,4 +14,11 @@ $(document).ready(function()
     {
         document.getElementById('account-name').focus();
     }
+
+    $('#button-remove-account-icon').click(function()
+    {
+        document.querySelector(".account-icon-preview").classList.toggle('hidden', true);
+        document.getElementById("account-icon-placeholder").classList.toggle('hidden', false);
+        document.getElementById("hidden-input-account-icon").value = '';
+    });
 });
\ No newline at end of file
diff --git a/src/main/resources/templates/accounts/newAccount.ftl b/src/main/resources/templates/accounts/newAccount.ftl
index 5d3a241374261a87a618fe7dba512c07fced4dd1..f8f7c7df4aa39c327bb5c7c60d4d68b83960c17f 100644
--- a/src/main/resources/templates/accounts/newAccount.ftl
+++ b/src/main/resources/templates/accounts/newAccount.ftl
@@ -10,6 +10,7 @@
         </#if>
 
         <@header.header "BudgetMaster - ${title}"/>
+        <@header.style "accounts"/>
         <#import "/spring.ftl" as s>
     </head>
     <@header.body>
@@ -47,8 +48,16 @@
                         <div class="row">
                             <div class="input-field col s12 m12 l8 offset-l2">
                                 <i class="fas fa-icons prefix"></i>
-                                <input id="account-icon" type="text" name="iconPath" <@validation.validation "iconPath"/> value="<#if account.getIconPath()??>${account.getIconPath()}</#if>">
-                                <label for="account-icon">${locale.getString("account.new.label.icon")}</label>
+                                <label class="input-label" for="account-icon">${locale.getString("account.new.label.icon")}</label>
+
+                                <div id="account-icon" class="valign-wrapper">
+                                    <a href="#modalAccountIconSelect" id="account-icon-preview" class="modal-trigger">
+                                        <img src="<#if account.getIconPath()?has_content>${account.getIconPath()}</#if>" class="account-icon-preview <#if account.getIconPath()?has_content == false>hidden</#if>"/>
+                                        <div id="account-icon-placeholder" class="<#if account.getIconPath()?has_content>hidden</#if>">${locale.getString("account.new.icon.placeholder")}</div>
+                                    </a>
+                                    <@header.buttonFlat url='' icon='delete' id='button-remove-account-icon' localizationKey='' classes="no-padding text-default" noUrl=true/>
+                                    <input id="hidden-input-account-icon" type="hidden" name="iconPath" value="<#if account.getIconPath()??>${account.getIconPath()}</#if>">
+                                </div>
                             </div>
                         </div>