Implement category icons

27 files changed, 80 insertions, 39 deletions

diff --git a/modern/public/images/icon/animal.svg b/modern/public/images/icon/animal.svg
new file mode 100644
index 00000000..87a914ca
--- /dev/null
+++ b/modern/public/images/icon/animal.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M 8.9003906 3.0019531 C 8.7956094 2.9959687 8.6911875 3.0029844 8.5859375 3.0214844 C 7.4759375 3.2044844 6.813875 4.6223594 7.046875 6.3183594 C 7.182875 7.3053594 7.6113594 8.1708594 8.1933594 8.6308594 C 8.5023594 8.8738594 8.8396406 9 9.1816406 9 C 9.2586406 9 9.3360625 8.9934687 9.4140625 8.9804688 C 10.524062 8.7974688 11.186125 7.3795937 10.953125 5.6835938 C 10.817125 4.6965937 10.390594 3.8310937 9.8085938 3.3710938 C 9.5243437 3.1468438 9.2147344 3.0199063 8.9003906 3.0019531 z M 15.097656 3.0039062 C 14.782656 3.0227031 14.474906 3.1448906 14.191406 3.3691406 C 13.609406 3.8291406 13.181875 4.6936406 13.046875 5.6816406 C 12.814875 7.3786406 13.474984 8.7974688 14.583984 8.9804688 C 14.661984 8.9924688 14.740359 9 14.818359 9 C 15.161359 9 15.499594 8.8738594 15.808594 8.6308594 C 16.390594 8.1708594 16.818125 7.3063594 16.953125 6.3183594 C 17.185125 4.6213594 16.524062 3.2025312 15.414062 3.0195312 C 15.308063 3.0025313 15.202656 2.9976406 15.097656 3.0039062 z M 4.6484375 8 C 4.5197266 8.0056641 4.39225 8.0274063 4.265625 8.0664062 C 3.824625 8.2044063 3.4583281 8.5369062 3.2363281 9.0039062 C 2.9493281 9.6089062 2.9221094 10.382 3.1621094 11.125 C 3.5271094 12.257 4.4012969 13 5.2792969 13 C 5.4322969 13 5.584375 12.977641 5.734375 12.931641 C 6.175375 12.793641 6.5416719 12.461141 6.7636719 11.994141 C 7.0506719 11.389141 7.0778906 10.616047 6.8378906 9.8730469 C 6.4625156 8.7110469 5.5494141 7.9603516 4.6484375 8 z M 19.349609 8 C 18.447197 7.9608438 17.537484 8.7101719 17.162109 9.8730469 C 16.922109 10.615047 16.948328 11.389141 17.236328 11.994141 C 17.458328 12.461141 17.824625 12.793641 18.265625 12.931641 C 18.415625 12.977641 18.568703 13 18.720703 13 C 19.598703 13 20.471891 12.256047 20.837891 11.123047 C 21.077891 10.381047 21.051672 9.6089063 20.763672 9.0039062 C 20.541672 8.5369062 20.175375 8.2044062 19.734375 8.0664062 C 19.607375 8.0275313 19.478525 8.0055937 19.349609 8 z M 12 10 C 10.835 10 9.7605 11.077125 9.0625 12.828125 C 8.5395 14.138125 7.503625 15.152125 6.265625 15.828125 C 5.154625 16.434125 5 17.11725 5 17.65625 C 5 19.82025 8.533 20.998047 12 20.998047 C 15.467 20.998047 19 19.82025 19 17.65625 C 19 17.11725 18.845375 16.433172 17.734375 15.826172 C 16.495375 15.151172 15.4605 14.138125 14.9375 12.828125 C 14.2395 11.078125 13.165 10 12 10 z" fill="#000000"/></svg>
diff --git a/modern/public/images/icon/bicycle.svg b/modern/public/images/icon/bicycle.svg
new file mode 100644
index 00000000..6cb40987
--- /dev/null
+++ b/modern/public/images/icon/bicycle.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M 15 3 A 1.0001 1.0001 0 0 0 14 4 L 14 4.1855469 A 1.0001 1.0001 0 0 0 14.052734 4.5058594 L 14.978516 7.2382812 L 9.9550781 15 L 9.8925781 15 C 9.5602248 13.416061 8.4541484 12.127761 6.9960938 11.492188 L 8.5527344 9 L 11 9 L 11 7 L 5 7 L 5 9 L 6.1972656 9 L 4.9453125 11.003906 A 1.0001 1.0001 0 0 0 4.9003906 11.005859 A 1.0001 1.0001 0 0 0 4.8007812 11.023438 A 1.0001 1.0001 0 0 0 4.640625 11.072266 C 2.0692551 11.267733 5.9211895e-16 13.381669 0 16 C 0 18.745455 2.2545455 21 5 21 C 7.4035927 21 9.4308229 19.272621 9.8984375 17 L 10.5 17 A 1.0001 1.0001 0 0 0 11.339844 16.542969 L 15.796875 9.65625 L 16.490234 11.705078 C 15.010817 12.576973 14 14.171245 14 16 C 14 18.745455 16.254545 21 19 21 C 21.745455 21 24 18.745455 24 16 C 24 13.381005 21.929707 11.266824 19.357422 11.072266 A 1.0001 1.0001 0 0 0 19 11 C 18.788557 11 18.581767 11.017029 18.376953 11.042969 L 16.332031 5 L 19 5 C 19.56503 5 20 5.4349698 20 6 C 20 6.5650302 19.56503 7 19 7 L 19 9 C 20.64497 9 22 7.6449698 22 6 C 22 4.3550302 20.64497 3 19 3 L 15 3 z M 5 13 C 6.3020387 13 7.4022636 13.838627 7.8164062 15 L 5 15 L 5 17 L 7.8164062 17 C 7.4022636 18.161373 6.3020387 19 5 19 C 3.3454545 19 2 17.654545 2 16 C 2 14.345455 3.3454545 13 5 13 z M 19.041016 13.003906 C 20.676234 13.026486 22 14.359504 22 16 C 22 17.654545 20.654545 19 19 19 C 17.345455 19 16 17.654545 16 16 C 16 15.046643 16.45524 14.2061 17.150391 13.65625 L 18.052734 16.320312 L 19.947266 15.679688 L 19.041016 13.003906 z" fill="#000000"/></svg>
diff --git a/modern/public/images/icon/boat.svg b/modern/public/images/icon/boat.svg
new file mode 100644
index 00000000..592302a6
--- /dev/null
+++ b/modern/public/images/icon/boat.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M 8.984375 2 A 1.0001 1.0001 0 0 0 8 3 L 8 3.171875 A 1.0001 1.0001 0 0 0 8.1796875 3.7441406 C 8.1180983 3.655854 8.2336897 3.8448895 8.3242188 4.0742188 C 8.4147476 4.303548 8.5237599 4.6182502 8.625 4.9804688 C 8.8274803 5.7049057 9 6.6278333 9 7.5 C 9 8.3721667 8.826034 9.3020135 8.6230469 10.035156 C 8.5215533 10.401728 8.4134185 10.720739 8.3222656 10.955078 C 8.2311127 11.189417 8.1185954 11.380905 8.1699219 11.304688 A 1.0001 1.0001 0 0 0 8 11.863281 L 8 12 A 1.0001 1.0001 0 0 0 9.125 12.992188 L 17.125 11.992188 A 1.0001 1.0001 0 0 0 18 11 C 18 7.3353738 15.68235 4.987833 13.509766 3.6992188 C 11.337181 2.4106043 9.1835938 2.0175781 9.1835938 2.0175781 A 1.0001 1.0001 0 0 0 8.984375 2 z M 10.568359 4.5625 C 11.166859 4.7839713 11.793876 5.0049413 12.490234 5.4179688 C 14.111319 6.3794746 15.54945 7.8407091 15.869141 10.132812 L 10.472656 10.808594 C 10.498986 10.720814 10.524991 10.661471 10.550781 10.568359 C 10.789539 9.7060027 11 8.6278333 11 7.5 C 11 6.4168081 10.795681 5.4010041 10.568359 4.5625 z M 3 14.990234 C 2.735 14.990234 2.4799687 15.095203 2.2929688 15.283203 C 2.1059688 15.471203 2 15.725234 2 15.990234 C 2 18.038234 2.5637344 19.616687 3.6777344 20.679688 C 5.1287344 22.064688 6.9660469 21.991234 6.9980469 21.990234 L 17.998047 22 L 18 22 C 21.007 22 23 17.73 23 16 C 23 15.448 22.553 15 22 15 L 3 14.990234 z" fill="#000000"/></svg>
diff --git a/modern/public/images/icon/bus.svg b/modern/public/images/icon/bus.svg
new file mode 100644
index 00000000..aa014fb8
--- /dev/null
+++ b/modern/public/images/icon/bus.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M 11 3 C 7.375 3 3 3.237 3 7 L 3 18 C 3 18.884916 3.3906671 19.671627 4 20.220703 L 4 22 C 4 22.552 4.448 23 5 23 L 6 23 C 6.552 23 7 22.552 7 22 L 7 21 L 17 21 L 17 22 C 17 22.552 17.448 23 18 23 L 19 23 C 19.552 23 20 22.552 20 22 L 20 20.220703 C 20.609333 19.671627 21 18.884916 21 18 L 21 7 C 21 3.237 16.625 3 13 3 L 11 3 z M 5 7 L 19 7 L 19 13 L 5 13 L 5 7 z M 6.5 16 C 7.328 16 8 16.672 8 17.5 C 8 18.328 7.328 19 6.5 19 C 5.672 19 5 18.328 5 17.5 C 5 16.672 5.672 16 6.5 16 z M 17.5 16 C 18.328 16 19 16.672 19 17.5 C 19 18.328 18.328 19 17.5 19 C 16.672 19 16 18.328 16 17.5 C 16 16.672 16.672 16 17.5 16 z" fill="#000000"/></svg>
diff --git a/modern/public/images/icon/car.svg b/modern/public/images/icon/car.svg
new file mode 100644
index 00000000..2d0cae40
--- /dev/null
+++ b/modern/public/images/icon/car.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M18.947,5.013C18.74,4.407,18.169,4,17.529,4H6.471C5.831,4,5.26,4.407,5.053,5.013L3,11v8c0,0.552,0.448,1,1,1h1 c0.552,0,1-0.448,1-1v-1h12v1c0,0.552,0.448,1,1,1h1c0.552,0,1-0.448,1-1v-8L18.947,5.013z M6.829,6h10.343l1.371,4H5.457L6.829,6z M6.5,15C5.672,15,5,14.328,5,13.5S5.672,12,6.5,12S8,12.672,8,13.5S7.328,15,6.5,15z M17.5,15c-0.828,0-1.5-0.672-1.5-1.5 s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S18.328,15,17.5,15z" fill="#000000"/></svg>
diff --git a/modern/public/images/icon/crane.svg b/modern/public/images/icon/crane.svg
new file mode 100644
index 00000000..ff9dff4d
--- /dev/null
+++ b/modern/public/images/icon/crane.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M 20.970703 1 A 1.0001 1.0001 0 0 0 20.59375 1.0859375 L 11.714844 5.03125 C 11.624515 5.018834 11.53526 5 11.443359 5 L 7 5 C 5.897 5 5 5.897 5 7 L 5 13 C 2.8026661 13 1 14.802666 1 17 L 1 18 L 1.203125 18 C 1.6594792 19.706363 3.1564058 21 5 21 L 17 21 C 18.843594 21 20.340521 19.706363 20.796875 18 L 21 18 L 21 17 C 21 14.802666 19.197334 13 17 13 L 17 11.220703 C 17 10.653703 16.808922 10.092703 16.419922 9.5957031 L 13.585938 6.390625 L 20 3.5390625 L 20 7.5 C 20 7.7869372 19.786937 8 19.5 8 C 19.213063 8 19 7.7869372 19 7.5 L 17 7.5 C 17 8.8690628 18.130937 10 19.5 10 C 20.869063 10 22 8.8690628 22 7.5 L 22 2 A 1.0001 1.0001 0 0 0 20.970703 1 z M 9 7 L 11.517578 7.0664062 L 14.111328 10 L 9 10 L 9 7 z M 5 15 L 17 15 C 18.116666 15 19 15.883334 19 17 C 19 18.116666 18.116666 19 17 19 L 5 19 C 3.8833339 19 3 18.116666 3 17 C 3 15.883334 3.8833339 15 5 15 z M 5 16 A 1 1 0 0 0 4 17 A 1 1 0 0 0 5 18 A 1 1 0 0 0 6 17 A 1 1 0 0 0 5 16 z M 9 16 A 1 1 0 0 0 8 17 A 1 1 0 0 0 9 18 A 1 1 0 0 0 10 17 A 1 1 0 0 0 9 16 z M 13 16 A 1 1 0 0 0 12 17 A 1 1 0 0 0 13 18 A 1 1 0 0 0 14 17 A 1 1 0 0 0 13 16 z M 17 16 A 1 1 0 0 0 16 17 A 1 1 0 0 0 17 18 A 1 1 0 0 0 18 17 A 1 1 0 0 0 17 16 z" fill="#000000"/></svg>
diff --git a/modern/public/images/icon/default.svg b/modern/public/images/icon/default.svg
new file mode 100644
index 00000000..886a6670
--- /dev/null
+++ b/modern/public/images/icon/default.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M12,2C8.134,2,5,5.134,5,9c0,5,7,13,7,13s7-8,7-13C19,5.134,15.866,2,12,2z M12,11.5c-1.381,0-2.5-1.119-2.5-2.5 c0-1.381,1.119-2.5,2.5-2.5s2.5,1.119,2.5,2.5C14.5,10.381,13.381,11.5,12,11.5z" fill="#000000"/></svg>
diff --git a/modern/public/images/icon/helicopter.svg b/modern/public/images/icon/helicopter.svg
new file mode 100644
index 00000000..19442684
--- /dev/null
+++ b/modern/public/images/icon/helicopter.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M 2 3 L 2 5 L 9 5 L 9 3 L 2 3 z M 11 3 L 11 6.2050781 C 8.584 6.6840781 7.012375 7.956 6.359375 9 L 4 9 L 4 7 L 2 7 L 2 13 L 4 13 L 4 11 L 6 11 L 6 13.300781 C 6 15.370781 7.8795313 17 10.269531 17 L 13.810547 17 C 16.170547 17 21.570703 17 21.970703 13 L 17 13 C 14.79 13 13 11.21 13 9 L 13 3 L 11 3 z M 15 3 L 15 5 L 22 5 L 22 3 L 15 3 z M 15 6.1699219 L 15 9 C 15 10.1 15.9 11 17 11 L 21.740234 11 C 20.940234 8.64 18.28 6.7299219 15 6.1699219 z M 21 18 C 21 18.552 20.552 19 20 19 L 6 19 L 6 21 L 20 21 C 21.654 21 23 19.654 23 18 L 21 18 z" fill="#000000"/></svg>
diff --git a/modern/public/images/icon/marker.svg b/modern/public/images/icon/marker.svg
deleted file mode 100644
index f626547c..00000000
--- a/modern/public/images/icon/marker.svg
+++ /dev/null
@@ -1,2 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg width="24px" height="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M 12 2.0097656 C 8.144 2.0097656 5.0078125 5.1479063 5.0078125 9.0039062 C 5.0078125 13.486906 10.974516 20.769172 11.228516 21.076172 L 12 22.011719 L 12.771484 21.076172 C 13.025484 20.768172 18.992188 13.486906 18.992188 9.0039062 C 18.992187 5.1469062 15.856 2.0097656 12 2.0097656 z M 12 4.0097656 C 14.753 4.0097656 16.992188 6.2509062 16.992188 9.0039062 C 16.992187 11.708906 13.878 16.361172 12 18.826172 C 10.122 16.363172 7.0078125 11.712906 7.0078125 9.0039062 C 7.0078125 6.2509062 9.247 4.0097656 12 4.0097656 z M 12 6.5 C 10.619 6.5 9.5 7.619 9.5 9 C 9.5 10.381 10.619 11.5 12 11.5 C 13.381 11.5 14.5 10.381 14.5 9 C 14.5 7.619 13.381 6.5 12 6.5 z" fill="#000000"/></svg>
diff --git a/modern/public/images/icon/motorcycle.svg b/modern/public/images/icon/motorcycle.svg
new file mode 100644
index 00000000..55c47e56
--- /dev/null
+++ b/modern/public/images/icon/motorcycle.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M 12 2 L 12 4 L 14.300781 4 L 15.228516 6.5371094 L 13.837891 7 L 11 7 A 1.0001 1.0001 0 0 0 10.292969 7.2929688 L 8.5859375 9 L 6 9 L 4 9 L 2 9 L 2 11 L 4 11 L 4 12.050781 C 1.7620407 12.304527 0 14.197514 0 16.5 C 0 18.973437 2.0265633 21 4.5 21 C 6.9734367 21 9 18.973437 9 16.5 C 9 16.272263 8.9647678 16.052912 8.9316406 15.833984 L 13.195312 14.980469 A 1.0001 1.0001 0 0 0 13.986328 14.164062 L 14.886719 8.7597656 L 15.916016 8.4160156 L 17.421875 12.535156 C 15.991607 13.291295 15 14.778882 15 16.5 C 15 18.973437 17.026563 21 19.5 21 C 21.973437 21 24 18.973437 24 16.5 C 24 14.026563 21.973437 12 19.5 12 C 19.452602 12 19.408387 12.012195 19.361328 12.013672 L 17.894531 8 L 21 8 L 21 6 L 17.162109 6 L 15.939453 2.65625 A 1.0001 1.0001 0 0 0 15 2 L 12 2 z M 11.414062 9 L 12.820312 9 L 12.126953 13.154297 L 8.1914062 13.941406 C 7.6586419 13.176759 6.8905699 12.598894 6 12.279297 L 6 11 L 9 11 A 1.0001 1.0001 0 0 0 9.7070312 10.707031 L 11.414062 9 z M 4.5 14 C 5.8925565 14 7 15.107443 7 16.5 C 7 17.892557 5.8925565 19 4.5 19 C 3.1074435 19 2 17.892557 2 16.5 C 2 15.107443 3.1074435 14 4.5 14 z M 19.5 14 C 20.892557 14 22 15.107443 22 16.5 C 22 17.892557 20.892557 19 19.5 19 C 18.107443 19 17 17.892557 17 16.5 C 17 15.107443 18.107443 14 19.5 14 z" fill="#000000"/></svg>
diff --git a/modern/public/images/icon/offroad.svg b/modern/public/images/icon/offroad.svg
new file mode 100644
index 00000000..80c9507a
--- /dev/null
+++ b/modern/public/images/icon/offroad.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M22,6h-2v2.65l-1.02-4.84C18.89,3.34,18.48,3,18,3H6C5.52,3,5.11,3.34,5.02,3.81L4,8.64V6H2v3h1.62L2.3,10.28 C2.11,10.47,2,10.73,2,11v9c0,0.552,0.448,1,1,1h2l-0.006-3h14.011L19,21h2c0.552,0,1-0.448,1-1v-9c0-0.27-0.11-0.53-0.31-0.72 L20.37,9H22V6z M6.82,5h10.36l0.79,4H6.03L6.82,5z M5.5,15C4.67,15,4,14.33,4,13.5C4,12.67,4.67,12,5.5,12S7,12.67,7,13.5 C7,14.33,6.33,15,5.5,15z M15,16H9v-4h6V16z M18.5,15c-0.83,0-1.5-0.67-1.5-1.5c0-0.83,0.67-1.5,1.5-1.5s1.5,0.67,1.5,1.5 C20,14.33,19.33,15,18.5,15z" fill="#000000"/></svg>
diff --git a/modern/public/images/icon/person.svg b/modern/public/images/icon/person.svg
new file mode 100644
index 00000000..f470355a
--- /dev/null
+++ b/modern/public/images/icon/person.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M 12 4 C 9.789063 4 8 5.789063 8 8 C 8 10.210938 9.789063 12 12 12 C 14.210938 12 16 10.210938 16 8 C 16 5.789063 14.210938 4 12 4 Z M 9.03125 13.40625 C 5.253906 14.550781 4 17.65625 4 17.65625 L 4 20 L 20 20 L 20 17.65625 C 20 17.65625 18.746094 14.550781 14.96875 13.40625 C 14.761719 14.863281 13.511719 16 12 16 C 10.488281 16 9.238281 14.863281 9.03125 13.40625 Z" fill="#000000"/></svg>
diff --git a/modern/public/images/icon/pickup.svg b/modern/public/images/icon/pickup.svg
new file mode 100644
index 00000000..d14f6bb7
--- /dev/null
+++ b/modern/public/images/icon/pickup.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M 8 3 A 1.0001 1.0001 0 0 0 7 4 L 7 10 L 1 10 C 0.45 10 0 10.45 0 11 L 0 18 C 0 18.55 0.45 19 1 19 L 2.5605469 19 C 3.2568565 20.187528 4.5333802 21 6 21 C 7.4666198 21 8.7431435 20.187528 9.4394531 19 L 14.560547 19 C 15.256857 20.187528 16.53338 21 18 21 C 19.46662 21 20.743143 20.187528 21.439453 19 L 23 19 C 23.55 19 24 18.55 24 18 L 24 12.820312 C 24 11.870312 23.320625 11.039375 22.390625 10.859375 L 18.642578 10.109375 L 14.869141 3.5039062 A 1.0001 1.0001 0 0 0 14 3 L 8 3 z M 9 5 L 13.419922 5 L 16.275391 10 L 9 10 L 9 5 z M 6 15 C 7.1164141 15 8 15.883586 8 17 C 8 18.116414 7.1164141 19 6 19 C 4.8835859 19 4 18.116414 4 17 C 4 15.883586 4.8835859 15 6 15 z M 18 15 C 19.116414 15 20 15.883586 20 17 C 20 18.116414 19.116414 19 18 19 C 16.883586 19 16 18.116414 16 17 C 16 15.883586 16.883586 15 18 15 z" fill="#000000"/></svg>
diff --git a/modern/public/images/icon/plane.svg b/modern/public/images/icon/plane.svg
new file mode 100644
index 00000000..5f4890b7
--- /dev/null
+++ b/modern/public/images/icon/plane.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M8,22h2l4.997-8H20c1.105,0,2-0.895,2-2s-0.895-2-2-2h-5.003L10,2H8l2.493,8H4.996L3.5,8H2l1,4l-1,4h1.5l1.496-2h5.497 L8,22z" fill="#000000"/></svg>
diff --git a/modern/public/images/icon/scooter.svg b/modern/public/images/icon/scooter.svg
new file mode 100644
index 00000000..e3b6df0d
--- /dev/null
+++ b/modern/public/images/icon/scooter.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M 17.5 3 C 16.672 3 16 3.672 16 4.5 C 16 4.6761216 16.035954 4.8429605 16.091797 5 L 14 5 L 14 7 L 16.310547 7 L 16.519531 7.5605469 L 12.619141 11 L 9 11 L 9 9 L 12 9 L 12 7 L 2 7 L 2 9 L 4.2402344 9 L 3.7304688 9.4492188 C 2.5804687 10.439219 1 11.8 1 14 C 1 14.27 1.1090625 14.520938 1.2890625 14.710938 L 1.4472656 14.869141 C 1.1853855 15.359439 1.0234375 15.909585 1.0234375 16.5 C 1.0234375 18.418558 2.5945875 20 4.5117188 20 C 6.2579417 20 7.7029312 18.683767 7.9492188 17 L 16.074219 17 C 16.320506 18.683767 17.765496 20 19.511719 20 C 21.42885 20 23 18.418558 23 16.5 C 23 15.033786 22.079411 13.770945 20.791016 13.253906 L 20.695312 13 L 23 13 L 23 11 L 19.945312 11 L 18.070312 6 L 20 6 L 20 3 L 17.5 3 z M 4.5117188 15 C 5.3427564 15 6 15.657134 6 16.5 C 6 17.342866 5.3427564 18 4.5117188 18 C 3.6806811 18 3.0234375 17.342866 3.0234375 16.5 C 3.0234375 15.657134 3.6806811 15 4.5117188 15 z M 19.511719 15 C 20.342756 15 21 15.657134 21 16.5 C 21 17.342866 20.342756 18 19.511719 18 C 18.680681 18 18.023438 17.342866 18.023438 16.5 C 18.023438 15.657134 18.680681 15 19.511719 15 z" fill="#000000"/></svg>
diff --git a/modern/public/images/icon/ship.svg b/modern/public/images/icon/ship.svg
new file mode 100644
index 00000000..58b21f4b
--- /dev/null
+++ b/modern/public/images/icon/ship.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M 11 2 L 11 3 L 9 3 A 1.0001 1.0001 0 0 0 8 4 L 8 5 L 6 5 A 1.0001 1.0001 0 0 0 5 6 L 5 10.880859 L 4.1601562 11.109375 C 3.3001563 11.289375 2.5804688 11.889219 2.2304688 12.699219 C 1.8804687 13.509219 1.940625 14.439453 2.390625 15.189453 L 4 17.880859 L 4 18.980469 C 3.9171433 18.988279 3.8366386 19 3.75 19 C 3.1869011 19 2.694455 18.824995 2.3925781 18.605469 C 2.0907013 18.385943 2 18.181158 2 18 L 0 18 C 0 18.923842 0.52342369 19.718432 1.2167969 20.222656 C 1.91017 20.72688 2.7940989 21 3.75 21 C 4.7059011 21 5.58983 20.72688 6.2832031 20.222656 C 6.3611489 20.165974 6.4268517 20.093089 6.5 20.029297 C 6.5731483 20.093089 6.6388511 20.165974 6.7167969 20.222656 C 7.41017 20.72688 8.2940989 21 9.25 21 C 10.205901 21 11.08983 20.72688 11.783203 20.222656 C 11.861149 20.165974 11.926852 20.093089 12 20.029297 C 12.073148 20.093089 12.138851 20.165974 12.216797 20.222656 C 12.91017 20.72688 13.794099 21 14.75 21 C 15.705901 21 16.58983 20.72688 17.283203 20.222656 C 17.361149 20.165974 17.426852 20.093089 17.5 20.029297 C 17.573148 20.093089 17.638851 20.165974 17.716797 20.222656 C 18.41017 20.72688 19.294099 21 20.25 21 C 21.205901 21 22.08983 20.72688 22.783203 20.222656 C 23.476576 19.718432 24 18.923842 24 18 L 22 18 C 22 18.181158 21.9093 18.385943 21.607422 18.605469 C 21.305545 18.824995 20.813099 19 20.25 19 C 20.163361 19 20.082857 18.988279 20 18.980469 L 20 17.880859 L 21.609375 15.199219 C 22.059375 14.439219 22.119531 13.509219 21.769531 12.699219 C 21.419531 11.889219 20.700625 11.299141 19.890625 11.119141 L 19 10.876953 L 19 6 A 1.0001 1.0001 0 0 0 18 5 L 16 5 L 16 4 A 1.0001 1.0001 0 0 0 15 3 L 13 3 L 13 2 L 11 2 z M 10 5 L 14 5 L 14 6 A 1.0001 1.0001 0 0 0 15 7 L 17 7 L 17 10.335938 L 12 8.9804688 L 7 10.337891 L 7 7 L 9 7 A 1.0001 1.0001 0 0 0 10 6 L 10 5 z M 8 14 C 8.6 14 9 14.47 9 15 C 9 15.53 8.6 16 8 16 C 7.4 16 7 15.53 7 15 C 7 14.47 7.4 14 8 14 z M 16 14 C 16.6 14 17 14.47 17 15 C 17 15.53 16.6 16 16 16 C 15.4 16 15 15.53 15 15 C 15 14.47 15.4 14 16 14 z" fill="#000000"/></svg>
diff --git a/modern/public/images/icon/tractor.svg b/modern/public/images/icon/tractor.svg
new file mode 100644
index 00000000..03c577ef
--- /dev/null
+++ b/modern/public/images/icon/tractor.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M 5 4 C 4.448 4 4 4.448 4 5 L 4 11.609375 C 2.2234889 12.523708 1 14.3737 1 16.5 C 1 19.525721 3.4742785 22 6.5 22 C 9.0054253 22 11.12762 20.301307 11.785156 18 L 16.050781 18 C 16.026575 18.164905 16 18.328781 16 18.5 C 16 20.421152 17.578848 22 19.5 22 C 21.421152 22 23 20.421152 23 18.5 C 23 17.116848 22.175306 15.9223 21 15.355469 L 21 10 C 21 9.448 20.552 9 20 9 L 17 9 L 17 6 L 18 6 L 19 6 L 19 4 L 18 4 L 17 4 C 15.906937 4 15 4.9069372 15 6 L 15 9 L 12.677734 9 L 10.927734 4.6289062 C 10.775734 4.2499062 10.409 4 10 4 L 5 4 z M 6.5 13 C 8.4448413 13 10 14.555159 10 16.5 C 10 18.444841 8.4448413 20 6.5 20 C 4.5551587 20 3 18.444841 3 16.5 C 3 14.555159 4.5551587 13 6.5 13 z M 6.5 15 A 1.5 1.5 0 0 0 5 16.5 A 1.5 1.5 0 0 0 6.5 18 A 1.5 1.5 0 0 0 8 16.5 A 1.5 1.5 0 0 0 6.5 15 z M 19.5 17 C 20.340272 17 21 17.659728 21 18.5 C 21 19.340272 20.340272 20 19.5 20 C 18.659728 20 18 19.340272 18 18.5 C 18 17.659728 18.659728 17 19.5 17 z" fill="#000000"/></svg>
diff --git a/modern/public/images/icon/train.svg b/modern/public/images/icon/train.svg
new file mode 100644
index 00000000..db3a1077
--- /dev/null
+++ b/modern/public/images/icon/train.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M 7 2 C 5.34375 2 4 3.34375 4 5 L 4 16.84375 C 4 18.53125 5.332031 19.921875 7 20 L 6 21 L 6 22 L 18 22 L 18 21 L 17 20 C 18.667969 19.921875 20 18.53125 20 16.84375 L 20 5 C 20 3.34375 18.65625 2 17 2 Z M 9 4 L 15 4 L 15 5 L 9 5 Z M 6 7 L 11 7 L 11 12 L 6 12 Z M 13 7 L 18 7 L 18 12 L 13 12 Z M 7.5 15 C 8.328125 15 9 15.671875 9 16.5 C 9 17.328125 8.328125 18 7.5 18 C 6.671875 18 6 17.328125 6 16.5 C 6 15.671875 6.671875 15 7.5 15 Z M 16.5 15 C 17.328125 15 18 15.671875 18 16.5 C 18 17.328125 17.328125 18 16.5 18 C 15.671875 18 15 17.328125 15 16.5 C 15 15.671875 15.671875 15 16.5 15 Z" fill="#000000"/></svg>
diff --git a/modern/public/images/icon/tram.svg b/modern/public/images/icon/tram.svg
new file mode 100644
index 00000000..549346eb
--- /dev/null
+++ b/modern/public/images/icon/tram.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M 12 0 C 8.9426113 0 6.309955 0.29967448 4.7363281 0.73242188 L 5.2675781 2.6601562 C 6.4939513 2.3229037 9.0813887 2 12 2 C 14.920658 2 17.508002 2.3229037 18.734375 2.6601562 L 19.265625 0.73242188 C 17.691998 0.29967448 15.059342 0 12 0 z M 8 4 C 5.79 4 4 5.79 4 8 L 4 19 L 4 22.263672 C 4 22.670672 4.336 23 4.75 23 L 7 23 L 7 22 L 17 22 L 17 23 L 19.25 23 C 19.664 23 20 22.670672 20 22.263672 L 20 19 L 20 8 C 20 5.79 18.21 4 16 4 L 8 4 z M 8 6 L 16 6 C 17.1 6 18 6.9 18 8 L 18 13 L 6 13 L 6 8 C 6 6.9 6.9 6 8 6 z M 12 16 C 12.55 16 13 16.45 13 17 C 13 17.55 12.55 18 12 18 C 11.45 18 11 17.55 11 17 C 11 16.45 11.45 16 12 16 z" fill="#000000"/></svg>
diff --git a/modern/public/images/icon/trolleybus.svg b/modern/public/images/icon/trolleybus.svg
new file mode 100644
index 00000000..76f749c9
--- /dev/null
+++ b/modern/public/images/icon/trolleybus.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M17,4h-0.52l1.2-3h-2.16l-1.2,3H9.68l-1.2-3H6.32l1.2,3H7C4.79,4,3,5.79,3,8v13.26C3,21.67,3.34,22,3.75,22H6v-2h12v2h2.25 c0.41,0,0.75-0.33,0.75-0.74V8C21,5.79,19.21,4,17,4z M8,16c-0.55,0-1-0.45-1-1s0.45-1,1-1s1,0.45,1,1S8.55,16,8,16z M16,16 c-0.55,0-1-0.45-1-1s0.45-1,1-1s1,0.45,1,1S16.55,16,16,16z M19,11H5V8c0-1.1,0.9-2,2-2h10c1.1,0,2,0.9,2,2V11z" fill="#000000"/></svg>
diff --git a/modern/public/images/icon/truck.svg b/modern/public/images/icon/truck.svg
new file mode 100644
index 00000000..4dd910c8
--- /dev/null
+++ b/modern/public/images/icon/truck.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M 3 3 C 2.45 3 2 3.45 2 4 L 2 17 C 2 17.55 2.45 18 3 18 L 3.0507812 18 C 3.2958204 19.692046 4.7411114 21 6.5 21 C 8.2588886 21 9.7041796 19.692046 9.9492188 18 L 14.050781 18 C 14.29582 19.692046 15.741111 21 17.5 21 C 19.258889 21 20.70418 19.692046 20.949219 18 L 22 18 C 22.55 18 23 17.55 23 17 L 23 12.310547 C 23 11.750547 22.850781 11.210469 22.550781 10.730469 L 20.519531 7.4296875 C 19.969531 6.5496875 19.000937 6 17.960938 6 L 14 6 L 14 4 C 14 3.45 13.55 3 13 3 L 3 3 z M 14 8 L 17.960938 8 C 18.310938 8 18.630547 8.1804687 18.810547 8.4804688 L 20.849609 11.779297 C 20.949609 11.939297 21 12.120547 21 12.310547 L 21 16 L 20.648438 16 C 20.084435 14.821937 18.891001 14 17.5 14 C 16.108999 14 14.915565 14.821937 14.351562 16 L 14 16 L 14 8 z M 6.5 16 C 7.327 16 8 16.673 8 17.5 C 8 18.327 7.327 19 6.5 19 C 5.673 19 5 18.327 5 17.5 C 5 16.673 5.673 16 6.5 16 z M 17.5 16 C 18.327 16 19 16.673 19 17.5 C 19 18.327 18.327 19 17.5 19 C 16.673 19 16 18.327 16 17.5 C 16 16.673 16.673 16 17.5 16 z" fill="#000000"/></svg>
diff --git a/modern/public/images/icon/van.svg b/modern/public/images/icon/van.svg
new file mode 100644
index 00000000..7ee3cc54
--- /dev/null
+++ b/modern/public/images/icon/van.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M 5 3 C 3.35 3 2 4.35 2 6 L 2 17 C 2 17.55 2.45 18 3 18 L 4.0507812 18 C 4.2958204 19.692046 5.7411114 21 7.5 21 C 9.2588886 21 10.70418 19.692046 10.949219 18 L 13.050781 18 C 13.29582 19.692046 14.741111 21 16.5 21 C 18.258889 21 19.70418 19.692046 19.949219 18 L 21 18 C 21.55 18 22 17.55 22 17 L 22 11.740234 C 22 11.020234 21.739297 10.329063 21.279297 9.7890625 L 16.359375 4.0507812 C 15.789375 3.3807813 14.960078 3 14.080078 3 L 5 3 z M 12 5 L 14.080078 5 C 14.370078 5 14.649844 5.1296094 14.839844 5.3496094 L 19.679688 11 L 12 11 L 12 5 z M 7.5 16 C 8.327 16 9 16.673 9 17.5 C 9 18.327 8.327 19 7.5 19 C 6.673 19 6 18.327 6 17.5 C 6 16.673 6.673 16 7.5 16 z M 16.5 16 C 17.327 16 18 16.673 18 17.5 C 18 18.327 17.327 19 16.5 19 C 15.673 19 15 18.327 15 17.5 C 15 16.673 15.673 16 16.5 16 z" fill="#000000"/></svg>
diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js
index d4b83e6e..7c9b5671 100644
--- a/modern/src/DevicePage.js
+++ b/modern/src/DevicePage.js
@@ -8,6 +8,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import EditAttributesView from './attributes/EditAttributesView';
 import deviceAttributes from './attributes/deviceAttributes';
 import SelectField from './form/SelectField';
+import { deviceCategories } from './common/deviceCategories';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -15,30 +16,6 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const deviceCategories = [
-  'default',
-  'animal',
-  'bicycle',
-  'boat',
-  'bus',
-  'car',
-  'crane',
-  'helicopter',
-  'motorcycle',
-  'offroad',
-  'person',
-  'pickup',
-  'plane',
-  'ship',
-  'tractor',
-  'train',
-  'tram',
-  'trolleybus',
-  'truck',
-  'van',
-  'scooter',
-];
-
 const DevicePage = () => {
   const classes = useStyles();
 
diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index 28ead786..6f8cea02 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -21,6 +21,11 @@ const useStyles = makeStyles(() => ({
     maxHeight: '100%',
     overflow: 'auto',
   },
+  icon: {
+    width: '25px',
+    height: '25px',
+    filter: 'brightness(0) invert(1)',
+  },
 }));
 
 const DeviceView = ({ updateTimestamp, onMenuClick }) => {
@@ -43,7 +48,7 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => {
           <ListItem button key={item.id} onClick={() => dispatch(devicesActions.select(item))}>
             <ListItemAvatar>
               <Avatar>
-                <LocationOnIcon />
+                <img className={classes.icon} src={`images/icon/${item.category || 'default'}.svg`} />
               </Avatar>
             </ListItemAvatar>
             <ListItemText primary={item.name} secondary={item.uniqueId} />
diff --git a/modern/src/common/deviceCategories.js b/modern/src/common/deviceCategories.js
new file mode 100644
index 00000000..1eda1902
--- /dev/null
+++ b/modern/src/common/deviceCategories.js
@@ -0,0 +1,23 @@
+export const deviceCategories = [
+  'default',
+  'animal',
+  'bicycle',
+  'boat',
+  'bus',
+  'car',
+  'crane',
+  'helicopter',
+  'motorcycle',
+  'offroad',
+  'person',
+  'pickup',
+  'plane',
+  'ship',
+  'tractor',
+  'train',
+  'tram',
+  'trolleybus',
+  'truck',
+  'van',
+  'scooter',
+];
diff --git a/modern/src/map/MainMap.js b/modern/src/map/MainMap.js
index c93c26dd..0b7eea25 100644
--- a/modern/src/map/MainMap.js
+++ b/modern/src/map/MainMap.js
@@ -30,6 +30,7 @@ const MainMap = () => {
     return {
       deviceId: position.deviceId,
       name: device ? device.name : '',
+      category: device && device.category || 'default',
     }
   };
 
@@ -89,7 +90,7 @@ const MainMap = () => {
         'type': 'geojson',
         'data': positions,
       });
-      mapManager.addLayer('device-icon', 'positions', 'icon-marker', '{name}', markerClickHandler);
+      mapManager.addLayer('device-icon', 'positions', '{category}', '{name}', markerClickHandler);
 
       const bounds = mapManager.calculateBounds(positions.features);
       if (bounds) {
@@ -118,12 +119,7 @@ const MainMap = () => {
     }
   }, [positions]);
 
-  const style = {
-    width: '100%',
-    height: '100%',
-  };
-
-  return <div style={style} ref={containerEl} />;
+  return <div style={{ width: '100%', height: '100%' }} ref={containerEl} />;
 }
 
 export default MainMap;
diff --git a/modern/src/map/mapManager.js b/modern/src/map/mapManager.js
index 5c0510c4..e496a6c5 100644
--- a/modern/src/map/mapManager.js
+++ b/modern/src/map/mapManager.js
@@ -1,5 +1,6 @@
 import 'mapbox-gl/dist/mapbox-gl.css';
 import mapboxgl from 'mapbox-gl';
+import { deviceCategories } from '../common/deviceCategories';
 
 let readyListeners = [];
 
@@ -32,8 +33,9 @@ const loadIcon = async (key, background, url) => {
   const context = canvas.getContext('2d');
   context.drawImage(background, 0, 0, canvas.width, canvas.height);
 
-  const imageWidth = image.width * pixelRatio;
-  const imageHeight = image.height * pixelRatio;
+  const iconRatio = 0.5;
+  const imageWidth = canvas.width * iconRatio;
+  const imageHeight = canvas.height * iconRatio;
   context.drawImage(image, (canvas.width - imageWidth) / 2, (canvas.height - imageHeight) / 2, imageWidth, imageHeight);
 
   map.addImage(key, context.getImageData(0, 0, canvas.width, canvas.height), { pixelRatio });
@@ -156,9 +158,7 @@ map.addControl(new mapboxgl.NavigationControl());
 
 map.on('load', async () => {
   const background = await loadImage('images/background.svg');
-  await Promise.all([
-    loadIcon('icon-marker', background, 'images/icon/marker.svg'),
-  ]);
+  await Promise.all(deviceCategories.map(async category => loadIcon(category, background, `images/icon/${category}.svg`)));
   if (readyListeners) {
     readyListeners.forEach(listener => listener());
     readyListeners = null;