diff --git a/controller/pagecontroller.php b/controller/pagecontroller.php
index 38f3bf8..0b0070c 100644
--- a/controller/pagecontroller.php
+++ b/controller/pagecontroller.php
@@ -139,36 +139,22 @@ class PageController extends Controller {
         $userFolder = \OC::$server->getUserFolder();
         $userfolder_path = $userFolder->getPath();
 
-        // DIRS array population
-        $all = $userFolder->search(".gpx");
-        $alldirs = Array();
-        foreach($all as $file){
-            if ($file->getType() === \OCP\Files\FileInfo::TYPE_FILE and
-                (
-                    endswith($file->getName(), '.gpx') or
-                    endswith($file->getName(), '.GPX')
-                )
-            ){
-                $rel_dir = str_replace($userfolder_path, '', dirname($file->getPath()));
-                $rel_dir = str_replace('//', '/', $rel_dir);
-                if ($rel_dir === ''){
-                    $rel_dir = '/';
-                }
-                if (!in_array($rel_dir, $alldirs)){
-                    array_push($alldirs, $rel_dir);
-                }
-            }
-        }
-
         $tss = $this->getUserTileServers();
 
+        // extra symbols
+        $dataDirPath = $this->config->getSystemValue('datadirectory').'/gpxedit';
+        $extraSymbolList = Array();
+	    foreach(globRecursive($dataDirPath.'/symbols', '*.png', False) as $symbolfile){
+            $filename = basename($symbolfile);
+            array_push($extraSymbolList, Array('smallname'=>str_replace('.png', '', $filename), 'name'=>$filename));
+        }
+
         // PARAMS to view
 
-        sort($alldirs);
         $params = [
-            'dirs'=>$alldirs,
             'username'=>$this->userId,
 			'tileservers'=>$tss,
+            'extrasymbols'=>$extraSymbolList,
             'gpxedit_version'=>$this->appVersion
         ];
         $response = new TemplateResponse('gpxedit', 'main', $params);
diff --git a/js/gpxedit.js b/js/gpxedit.js
index e33f9e2..20d4e21 100644
--- a/js/gpxedit.js
+++ b/js/gpxedit.js
@@ -904,7 +904,18 @@ function updateLeafletDrawMarkerStyle(){
     var wst = $('#markerstyleselect').val();
     var theclass = symbolSelectClasses[wst];
     $('#markerstyleselect').removeClass($('#markerstyleselect').attr('class'));
-    $('#markerstyleselect').addClass(theclass);
+    $('#markerstyleselect').attr('style','');
+    if (theclass){
+        $('#markerstyleselect').addClass(theclass);
+    }
+    else if (wst !== ''){
+        var url = OC.generateUrl('/apps/gpxedit/getExtraSymbol?');
+        var fullurl = url+'name='+encodeURI(wst+'.png');
+        $('#markerstyleselect').attr('style',
+            'background: url(\''+fullurl+'\') no-repeat '+
+            'right 8px center rgba(240, 240, 240, 0.90);'+
+            'background-size: 24px 24px;');
+    }
     var tst = $('#tooltipstyleselect').val();
     var theicon = symbolIcons[wst];
 
@@ -956,7 +967,8 @@ function restoreOptions(){
         alert('failed to restore options values');
     });
     optionsValues = $.parseJSON(optionsValues);
-    if (optionsValues.markerstyle !== undefined){
+    if (optionsValues.markerstyle !== undefined &&
+            symbolIcons.hasOwnProperty(optionsValues.markerstyle)){
         $('#markerstyleselect').val(optionsValues.markerstyle);
     }
     if (optionsValues.tooltipstyle !== undefined){
@@ -1010,10 +1022,26 @@ function updateSavePath(){
     $('#savePath').val(dir+'/'+filename);
 }
 
+function addExtraSymbols(){
+    var url = OC.generateUrl('/apps/gpxedit/getExtraSymbol?');
+    $('ul#extrasymbols li').each(function(){
+        var name = $(this).attr('name');
+        var smallname = $(this).html();
+        var fullurl = url+'name='+encodeURI(name);
+        var d = L.icon({
+            iconUrl: fullurl,
+            iconSize: L.point(24, 24),
+            iconAnchor: [12, 12]
+        });
+        symbolIcons[smallname] = d;
+    });
+}
+
 $(document).ready(function(){
     gpxedit.username = $('p#username').html();
     load_map();
 	document.onkeydown = checkKey;
+    addExtraSymbols();
     fillWaypointStyles();
     restoreOptions();
 
@@ -1173,7 +1201,18 @@ $(document).ready(function(){
 
 	$('body').on('change', 'select[role=symbol]', function() {
         $(this).removeClass($(this).attr('class'));
-        $(this).addClass(symbolSelectClasses[$(this).val()]);
+        $(this).attr('style','');
+        if (symbolSelectClasses.hasOwnProperty($(this).val())){
+            $(this).addClass(symbolSelectClasses[$(this).val()]);
+        }
+        else if ($(this).val() !== ''){
+            var url = OC.generateUrl('/apps/gpxedit/getExtraSymbol?');
+            var fullurl = url+'name='+encodeURI($(this).val()+'.png');
+            $(this).attr('style',
+                'background: url(\''+fullurl+'\') no-repeat '+
+                'right 8px center rgba(240, 240, 240, 0.90);'+
+                'background-size: 24px 24px;');
+        }
     });
 
     // load a file if 'file' GET url parameter was given
diff --git a/templates/gpxcontent.php b/templates/gpxcontent.php
index 92fc656..be5ee17 100644
--- a/templates/gpxcontent.php
+++ b/templates/gpxcontent.php
@@ -72,6 +72,15 @@ p($_['gpxedit_version']);
 echo '<p id="username" style="display:none">';
 p($_['username']);
 echo '</p>'."\n";
+echo '<ul id="extrasymbols" style="display:none">';
+foreach($_['extrasymbols'] as $symbol){
+    echo '<li name="';
+    p($symbol['name']);
+    echo '">';
+    p($symbol['smallname']);
+    echo '</li>';
+}
+echo '</ul>'."\n";
 
 ?>
 </div>