diff --git a/css/30_highways.css b/css/30_highways.css
index 19b3f586db4..176f160763d 100644
--- a/css/30_highways.css
+++ b/css/30_highways.css
@@ -544,6 +544,27 @@ path.line.stroke.tag-highway-cycleway,
     stroke: #fff;
 }
 
+/* shared paths */
+path.line.casing.tag-highway-cycleway.tag-bicycle-designated.tag-foot-designated:not(.tag-crossing),
+path.line.casing.tag-highway-path.tag-bicycle-designated.tag-foot-designated:not(.tag-crossing) {
+    stroke: #fff;
+}
+.preset-icon .icon.tag-highway-cycleway.tag-bicycle-designated.tag-foot-designated,
+.preset-icon .icon.tag-highway-path.tag-bicycle-designated.tag-foot-designated {
+    color: #b458ed;
+    fill: #fff;
+}
+path.line.stroke.tag-highway-cycleway.tag-bicycle-designated.tag-foot-designated,
+path.line.stroke.tag-highway-path.tag-bicycle-designated.tag-foot-designated,
+.preset-icon-container path.casing.tag-highway-cycleway.tag-bicycle-designated.tag-foot-designated,
+.preset-icon-container path.casing.tag-highway-path.tag-bicycle-designated.tag-foot-designated {
+    stroke: #b458ed;
+}
+.preset-icon-container path.stroke.tag-highway-cycleway.tag-bicycle-designated.tag-foot-designated:not(.tag-crossing),
+.preset-icon-container path.stroke.tag-highway-path.tag-bicycle-designated.tag-foot-designated:not(.tag-crossing) {
+    stroke: #fff;
+}
+
 /* bridleways */
 .preset-icon .icon.tag-route-horse,
 .preset-icon .icon.tag-highway-bridleway {
diff --git a/modules/svg/tag_classes.js b/modules/svg/tag_classes.js
index aa73733e1af..3c5ae35df4a 100644
--- a/modules/svg/tag_classes.js
+++ b/modules/svg/tag_classes.js
@@ -14,7 +14,7 @@ export function svgTagClasses() {
         'oneway', 'bridge', 'tunnel', 'embankment', 'cutting', 'barrier',
         'surface', 'tracktype', 'footway', 'crossing', 'service', 'sport',
         'public_transport', 'location', 'parking', 'golf', 'type', 'leisure',
-        'man_made', 'indoor', 'construction', 'proposed', 'expressway'
+        'man_made', 'indoor', 'construction', 'proposed', 'expressway', 'bicycle', 'foot'
     ];
     var _tags = function(entity) { return entity.tags; };
 
@@ -61,16 +61,10 @@ export function svgTagClasses() {
 
         // pick at most one primary classification tag..
         for (i = 0; i < primaries.length; i++) {
-            k = primaries[i];
+            k = primaries[i].replace(':', '_');
             v = t[k];
             if (!v || v === 'no') continue;
 
-            if (k === 'piste:type') {  // avoid a ':' in the class name
-                k = 'piste';
-            } else if (k.includes(':')) {  // avoid a ':' in the class name
-                k = k.replace(':', '_');
-            }
-
             primary = k;
             if (statuses.indexOf(v) !== -1) {   // e.g. `railway=abandoned`
                 status = v;