diff --git a/client/js/templates/Source.jsx b/client/js/templates/Source.jsx
index c91275d12e..359187462a 100644
--- a/client/js/templates/Source.jsx
+++ b/client/js/templates/Source.jsx
@@ -317,6 +317,11 @@ function SourceEditForm({
         [updateEditedSource]
     );
 
+    const iconOnChange = useCallback(
+        (event) => updateEditedSource({ icon: event.target.value }),
+        [updateEditedSource]
+    );
+
     const spoutOnChange = useCallback(
         (event) =>
             handleSpoutChange({
@@ -370,6 +375,22 @@ function SourceEditForm({
 
     const _ = useContext(LocalizationContext);
 
+    const [showAdvanced, setShowAdvanced] = useState(false);
+    const [filterUsed, setFilterUsed] = useState(source.filter !== '');
+    // TODO: Remove undefined check once we implement it server side.
+    const [iconUsed, setIconUsed] = useState(source.icon !== '' && source.icon !== undefined);
+
+    const toggleShowAdvanced = useCallback(
+        () => {
+            setShowAdvanced((advanced) => !advanced);
+            console.log(source.filter);
+            setFilterUsed(source.filter !== '');
+            // TODO: Remove undefined check once we implement it server side.
+            setIconUsed(source.icon !== '' && source.icon !== undefined);
+        },
+        [source.filter, source.icon]
+    );
+
     const sourceParamsContent = (
         sourceParamsLoading ? (
             <Spinner size="3x" label={_('source_params_loading')} />
@@ -451,22 +472,24 @@ function SourceEditForm({
                 </li>
 
                 {/* filter */}
-                <li>
-                    <label htmlFor={`filter-${sourceId}`}>
-                        {_('source_filter')}
-                    </label>
-                    <input
-                        id={`filter-${sourceId}`}
-                        type="text"
-                        name="filter"
-                        accessKey="f"
-                        value={source.filter ?? ''}
-                        onChange={filterOnChange}
-                    />
-                    {sourceErrors['filter'] ? (
-                        <span className="error">{sourceErrors['filter']}</span>
-                    ) : null}
-                </li>
+                {showAdvanced || filterUsed ? (
+                    <li>
+                        <label htmlFor={`filter-${sourceId}`}>
+                            {_('source_filter')}
+                        </label>
+                        <input
+                            id={`filter-${sourceId}`}
+                            type="text"
+                            name="filter"
+                            accessKey="f"
+                            value={source.filter ?? ''}
+                            onChange={filterOnChange}
+                        />
+                        {sourceErrors['filter'] ? (
+                            <span className="error">{sourceErrors['filter']}</span>
+                        ) : null}
+                    </li>
+                ) : null}
 
                 {/* type */}
                 <li>
@@ -497,6 +520,26 @@ function SourceEditForm({
                     ) : null}
                 </li>
 
+                {showAdvanced || iconUsed ? (
+                    <li>
+                        <label htmlFor={`icon-${sourceId}`}>
+                            {/*_('source_icon')*/}
+                            {'Icon:'}
+                        </label>
+                        <input
+                            id={`icon-${sourceId}`}
+                            type="text"
+                            name="icon"
+                            accessKey="f"
+                            value={source.icon ?? ''}
+                            onChange={iconOnChange}
+                        />
+                        {sourceErrors['icon'] ? (
+                            <span className="error">{sourceErrors['icon']}</span>
+                        ) : null}
+                    </li>
+                ) : null}
+
                 {/* settings */}
                 {sourceParamsContent ? (
                     <li className="source-params">
@@ -513,6 +556,16 @@ function SourceEditForm({
 
                 {/* save/delete */}
                 <li className="source-action">
+                    <button
+                        type="button"
+                        className="source-toggle-advanced source-save"
+                        accessKey="a"
+                        onClick={toggleShowAdvanced}
+                    >
+                        {(showAdvanced ? 'Hide advanced' : 'Show advanced')}
+                        {/*{_(showAdvanced ? 'source_hide_advanced' : 'source_show_advanced')}*/}
+                    </button>
+                    {' • '}
                     <button
                         type="submit"
                         className="source-save"