diff --git a/setup.py b/setup.py
index 6d52855e..2673bf0d 100644
--- a/setup.py
+++ b/setup.py
@@ -43,6 +43,7 @@
         'selenium',
         'twine',
         'wheel',
+        'pyppeteer', # to generate icons with oca-gen-addon-icon
     ],
     python_requires='>=3.6',
     classifiers=[
diff --git a/tools/gen_addon_icon.css b/tools/gen_addon_icon.css
new file mode 100644
index 00000000..681c5769
--- /dev/null
+++ b/tools/gen_addon_icon.css
@@ -0,0 +1,351 @@
+/* Choose any icon from one of the following icon sets and replace the class of <i> elements accordingly
+    https://fontawesome.com/icons?d=gallery&m=free
+    https://simplelineicons.github.io/
+    https://useiconic.com/open
+    https://material.io/resources/icons/
+    https://tablericons.com/
+    https://erikflowers.github.io/weather-icons/
+    https://icons.getbootstrap.com/#icons
+    https://remixicon.com/
+*/
+@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css";
+@import "https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css";
+@import "https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css";
+@import "https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.2/iconfont/material-icons.min.css";
+@import "https://cdnjs.cloudflare.com/ajax/libs/tabler-icons/1.35.0/iconfont/tabler-icons.min.css";
+@import "https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/css/weather-icons.min.css";
+@import "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css";
+@import "https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css";
+@import "https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css";
+
+html {
+  text-align: center;
+  background-color: transparent;
+  height: 100%;
+  -webkit-print-color-adjust: exact;
+}
+
+body {
+  width: 128px;
+  height: 128px;
+  background: transparent;
+}
+
+.icon-box {
+  position: relative;
+  text-align: center;
+  overflow: hidden;
+  width: 128px;
+  height: 128px;
+  font-size: 90px;
+  line-height: 120px;
+  border-radius: 6px;
+  border-bottom: 2px solid;
+  border-top: 2px solid;
+  padding: 0;
+}
+
+.icon-box:before {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.icon-box span {
+  display: block;
+  height: 128px;
+  width: 128px;
+  color: #fff;
+  padding: 15;
+  z-index: 999;
+}
+
+.oorange {
+  background: linear-gradient(45deg, #cc7039, #da956b);
+  border-top-color: #e7bba2;
+  border-bottom-color: #643f2a;
+}
+
+.opink {
+  background: linear-gradient(45deg, #ca5377, #cd7690);
+  border-top-color: #dfa2b4;
+  border-bottom-color: #623241;
+}
+
+.oyellow {
+  background: linear-gradient(45deg, #b5aa59a4, #cdc484);
+  border-top-color: #ddd8b1;
+  border-bottom-color: #5b5739;
+}
+
+.ogray {
+  background: linear-gradient(45deg, #545554, #797c79);
+  border-bottom-color: #a5a7a5;
+  border-bottom-color: #3a3a3a;
+}
+
+.oteal {
+  background: linear-gradient(45deg, #218689, #269396);
+  border-bottom-color: #175557;
+  border-top-color: #78b9ba;
+}
+
+.oblue1 {
+  background: linear-gradient(45deg, #6a9eba, #94b6c8);
+  border-top-color: #bbd1dc;
+  border-bottom-color: #3d515c;
+}
+
+.oblue2 {
+  background: linear-gradient(45deg, #626584, #797da5);
+  border-top-color: #aaacc3;
+  border-bottom-color: #373946;
+}
+
+.ored {
+  background: linear-gradient(45deg, #7c3838, #b06161);
+  border-top-color: #c19393;
+  border-bottom-color: #462727;
+}
+
+.ogreen {
+  background: linear-gradient(45deg, #5f8a71, #7cc098);
+  border-top-color: #abd1bb;
+  border-bottom-color: #374c41;
+}
+
+.oorange span {
+  text-shadow: #a16542 -1px 1px, #a16542 -2px 2px, #a16542 -3px 3px,
+    #a16542 -4px 4px, #a16542 -5px 5px, #a16542 -6px 6px, #a16542 -7px 7px,
+    #a16542 -8px 8px, #a16542 -9px 9px, #a16542 -10px 10px, #a16542 -11px 11px,
+    #a16542 -12px 12px, #a16542 -13px 13px, #a16542 -14px 14px,
+    #a16542 -15px 15px, #a16542 -16px 16px, #a16542 -17px 17px,
+    #a16542 -18px 18px, #a16542 -19px 19px, #a16542 -20px 20px,
+    #a16542 -21px 21px, #a16542 -22px 22px, #a16542 -23px 23px,
+    #a16542 -24px 24px, #a16542 -25px 25px, #a16542 -26px 26px,
+    #a16542 -27px 27px, #a16542 -28px 28px, #a16542 -29px 29px,
+    #a16542 -30px 30px, #a16542 -31px 31px, #a16542 -32px 32px,
+    #a16542 -33px 33px, #a16542 -34px 34px, #a16542 -35px 35px,
+    #a16542 -36px 36px, #a16542 -37px 37px, #a16542 -38px 38px,
+    #a16542 -39px 39px, #a16542 -40px 40px, #a16542 -41px 41px,
+    #a16542 -42px 42px, #a16542 -43px 43px, #a16542 -44px 44px,
+    #a16542 -45px 45px, #a16542 -46px 46px, #a16542 -47px 47px,
+    #a16542 -48px 48px, #a16542 -49px 49px, #a16542 -50px 50px,
+    #a16542 -51px 51px, #a16542 -52px 52px, #a16542 -53px 53px,
+    #a16542 -54px 54px, #a16542 -55px 55px, #a16542 -56px 56px,
+    #a16542 -57px 57px, #a16542 -58px 58px, #a16542 -59px 59px,
+    #a16542 -60px 60px, #a16542 -61px 61px, #a16542 -62px 62px,
+    #a16542 -63px 63px, #a16542 -64px 64px, #a16542 -65px 65px,
+    #a16542 -66px 66px, #a16542 -67px 67px, #a16542 -68px 68px,
+    #a16542 -69px 69px, #a16542 -70px 70px;
+}
+
+.opink span {
+  text-shadow: #9e5168 -1px 1px, #9e5168 -2px 2px, #9e5168 -3px 3px,
+    #9e5168 -4px 4px, #9e5168 -5px 5px, #9e5168 -6px 6px, #9e5168 -7px 7px,
+    #9e5168 -8px 8px, #9e5168 -9px 9px, #9e5168 -10px 10px, #9e5168 -11px 11px,
+    #9e5168 -12px 12px, #9e5168 -13px 13px, #9e5168 -14px 14px,
+    #9e5168 -15px 15px, #9e5168 -16px 16px, #9e5168 -17px 17px,
+    #9e5168 -18px 18px, #9e5168 -19px 19px, #9e5168 -20px 20px,
+    #9e5168 -21px 21px, #9e5168 -22px 22px, #9e5168 -23px 23px,
+    #9e5168 -24px 24px, #9e5168 -25px 25px, #9e5168 -26px 26px,
+    #9e5168 -27px 27px, #9e5168 -28px 28px, #9e5168 -29px 29px,
+    #9e5168 -30px 30px, #9e5168 -31px 31px, #9e5168 -32px 32px,
+    #9e5168 -33px 33px, #9e5168 -34px 34px, #9e5168 -35px 35px,
+    #9e5168 -36px 36px, #9e5168 -37px 37px, #9e5168 -38px 38px,
+    #9e5168 -39px 39px, #9e5168 -40px 40px, #9e5168 -41px 41px,
+    #9e5168 -42px 42px, #9e5168 -43px 43px, #9e5168 -44px 44px,
+    #9e5168 -45px 45px, #9e5168 -46px 46px, #9e5168 -47px 47px,
+    #9e5168 -48px 48px, #9e5168 -49px 49px, #9e5168 -50px 50px,
+    #9e5168 -51px 51px, #9e5168 -52px 52px, #9e5168 -53px 53px,
+    #9e5168 -54px 54px, #9e5168 -55px 55px, #9e5168 -56px 56px,
+    #9e5168 -57px 57px, #9e5168 -58px 58px, #9e5168 -59px 59px,
+    #9e5168 -60px 60px, #9e5168 -61px 61px, #9e5168 -62px 62px,
+    #9e5168 -63px 63px, #9e5168 -64px 64px, #9e5168 -65px 65px,
+    #9e5168 -66px 66px, #9e5168 -67px 67px, #9e5168 -68px 68px,
+    #9e5168 -69px 69px, #9e5168 -70px 70px;
+}
+
+.oyellow span {
+  text-shadow: #938c57 -1px 1px, #938c57 -2px 2px, #938c57 -3px 3px,
+    #938c57 -4px 4px, #938c57 -5px 5px, #938c57 -6px 6px, #938c57 -7px 7px,
+    #938c57 -8px 8px, #938c57 -9px 9px, #938c57 -10px 10px, #938c57 -11px 11px,
+    #938c57 -12px 12px, #938c57 -13px 13px, #938c57 -14px 14px,
+    #938c57 -15px 15px, #938c57 -16px 16px, #938c57 -17px 17px,
+    #938c57 -18px 18px, #938c57 -19px 19px, #938c57 -20px 20px,
+    #938c57 -21px 21px, #938c57 -22px 22px, #938c57 -23px 23px,
+    #938c57 -24px 24px, #938c57 -25px 25px, #938c57 -26px 26px,
+    #938c57 -27px 27px, #938c57 -28px 28px, #938c57 -29px 29px,
+    #938c57 -30px 30px, #938c57 -31px 31px, #938c57 -32px 32px,
+    #938c57 -33px 33px, #938c57 -34px 34px, #938c57 -35px 35px,
+    #938c57 -36px 36px, #938c57 -37px 37px, #938c57 -38px 38px,
+    #938c57 -39px 39px, #938c57 -40px 40px, #938c57 -41px 41px,
+    #938c57 -42px 42px, #938c57 -43px 43px, #938c57 -44px 44px,
+    #938c57 -45px 45px, #938c57 -46px 46px, #938c57 -47px 47px,
+    #938c57 -48px 48px, #938c57 -49px 49px, #938c57 -50px 50px,
+    #938c57 -51px 51px, #938c57 -52px 52px, #938c57 -53px 53px,
+    #938c57 -54px 54px, #938c57 -55px 55px, #938c57 -56px 56px,
+    #938c57 -57px 57px, #938c57 -58px 58px, #938c57 -59px 59px,
+    #938c57 -60px 60px, #938c57 -61px 61px, #938c57 -62px 62px,
+    #938c57 -63px 63px, #938c57 -64px 64px, #938c57 -65px 65px,
+    #938c57 -66px 66px, #938c57 -67px 67px, #938c57 -68px 68px,
+    #938c57 -69px 69px, #938c57 -70px 70px;
+}
+
+.ogray span {
+  text-shadow: #525352 -1px 1px, #525352 -2px 2px, #525352 -3px 3px,
+    #525352 -4px 4px, #525352 -5px 5px, #525352 -6px 6px, #525352 -7px 7px,
+    #525352 -8px 8px, #525352 -9px 9px, #525352 -10px 10px, #525352 -11px 11px,
+    #525352 -12px 12px, #525352 -13px 13px, #525352 -14px 14px,
+    #525352 -15px 15px, #525352 -16px 16px, #525352 -17px 17px,
+    #525352 -18px 18px, #525352 -19px 19px, #525352 -20px 20px,
+    #525352 -21px 21px, #525352 -22px 22px, #525352 -23px 23px,
+    #525352 -24px 24px, #525352 -25px 25px, #525352 -26px 26px,
+    #525352 -27px 27px, #525352 -28px 28px, #525352 -29px 29px,
+    #525352 -30px 30px, #525352 -31px 31px, #525352 -32px 32px,
+    #525352 -33px 33px, #525352 -34px 34px, #525352 -35px 35px,
+    #525352 -36px 36px, #525352 -37px 37px, #525352 -38px 38px,
+    #525352 -39px 39px, #525352 -40px 40px, #525352 -41px 41px,
+    #525352 -42px 42px, #525352 -43px 43px, #525352 -44px 44px,
+    #525352 -45px 45px, #525352 -46px 46px, #525352 -47px 47px,
+    #525352 -48px 48px, #525352 -49px 49px, #525352 -50px 50px,
+    #525352 -51px 51px, #525352 -52px 52px, #525352 -53px 53px,
+    #525352 -54px 54px, #525352 -55px 55px, #525352 -56px 56px,
+    #525352 -57px 57px, #525352 -58px 58px, #525352 -59px 59px,
+    #525352 -60px 60px, #525352 -61px 61px, #525352 -62px 62px,
+    #525352 -63px 63px, #525352 -64px 64px, #525352 -65px 65px,
+    #525352 -66px 66px, #525352 -67px 67px, #525352 -68px 68px,
+    #525352 -69px 69px, #525352 -70px 70px;
+}
+
+.oteal span {
+  text-shadow: #297072 -1px 1px, #297072 -2px 2px, #297072 -3px 3px,
+    #297072 -4px 4px, #297072 -5px 5px, #297072 -6px 6px, #297072 -7px 7px,
+    #297072 -8px 8px, #297072 -9px 9px, #297072 -10px 10px, #297072 -11px 11px,
+    #297072 -12px 12px, #297072 -13px 13px, #297072 -14px 14px,
+    #297072 -15px 15px, #297072 -16px 16px, #297072 -17px 17px,
+    #297072 -18px 18px, #297072 -19px 19px, #297072 -20px 20px,
+    #297072 -21px 21px, #297072 -22px 22px, #297072 -23px 23px,
+    #297072 -24px 24px, #297072 -25px 25px, #297072 -26px 26px,
+    #297072 -27px 27px, #297072 -28px 28px, #297072 -29px 29px,
+    #297072 -30px 30px, #297072 -31px 31px, #297072 -32px 32px,
+    #297072 -33px 33px, #297072 -34px 34px, #297072 -35px 35px,
+    #297072 -36px 36px, #297072 -37px 37px, #297072 -38px 38px,
+    #297072 -39px 39px, #297072 -40px 40px, #297072 -41px 41px,
+    #297072 -42px 42px, #297072 -43px 43px, #297072 -44px 44px,
+    #297072 -45px 45px, #297072 -46px 46px, #297072 -47px 47px,
+    #297072 -48px 48px, #297072 -49px 49px, #297072 -50px 50px,
+    #297072 -51px 51px, #297072 -52px 52px, #297072 -53px 53px,
+    #297072 -54px 54px, #297072 -55px 55px, #297072 -56px 56px,
+    #297072 -57px 57px, #297072 -58px 58px, #297072 -59px 59px,
+    #297072 -60px 60px, #297072 -61px 61px, #297072 -62px 62px,
+    #297072 -63px 63px, #297072 -64px 64px, #297072 -65px 65px,
+    #297072 -66px 66px, #297072 -67px 67px, #297072 -68px 68px,
+    #297072 -69px 69px, #297072 -70px 70px;
+}
+
+.oblue1 span {
+  text-shadow: #628395 -1px 1px, #628395 -2px 2px, #628395 -3px 3px,
+    #628395 -4px 4px, #628395 -5px 5px, #628395 -6px 6px, #628395 -7px 7px,
+    #628395 -8px 8px, #628395 -9px 9px, #628395 -10px 10px, #628395 -11px 11px,
+    #628395 -12px 12px, #628395 -13px 13px, #628395 -14px 14px,
+    #628395 -15px 15px, #628395 -16px 16px, #628395 -17px 17px,
+    #628395 -18px 18px, #628395 -19px 19px, #628395 -20px 20px,
+    #628395 -21px 21px, #628395 -22px 22px, #628395 -23px 23px,
+    #628395 -24px 24px, #628395 -25px 25px, #628395 -26px 26px,
+    #628395 -27px 27px, #628395 -28px 28px, #628395 -29px 29px,
+    #628395 -30px 30px, #628395 -31px 31px, #628395 -32px 32px,
+    #628395 -33px 33px, #628395 -34px 34px, #628395 -35px 35px,
+    #628395 -36px 36px, #628395 -37px 37px, #628395 -38px 38px,
+    #628395 -39px 39px, #628395 -40px 40px, #628395 -41px 41px,
+    #628395 -42px 42px, #628395 -43px 43px, #628395 -44px 44px,
+    #628395 -45px 45px, #628395 -46px 46px, #628395 -47px 47px,
+    #628395 -48px 48px, #628395 -49px 49px, #628395 -50px 50px,
+    #628395 -51px 51px, #628395 -52px 52px, #628395 -53px 53px,
+    #628395 -54px 54px, #628395 -55px 55px, #628395 -56px 56px,
+    #628395 -57px 57px, #628395 -58px 58px, #628395 -59px 59px,
+    #628395 -60px 60px, #628395 -61px 61px, #628395 -62px 62px,
+    #628395 -63px 63px, #628395 -64px 64px, #628395 -65px 65px,
+    #628395 -66px 66px, #628395 -67px 67px, #628395 -68px 68px,
+    #628395 -69px 69px, #628395 -70px 70px;
+}
+
+.oblue2 span {
+  text-shadow: #595c72 -1px 1px, #595c72 -2px 2px, #595c72 -3px 3px,
+    #595c72 -4px 4px, #595c72 -5px 5px, #595c72 -6px 6px, #595c72 -7px 7px,
+    #595c72 -8px 8px, #595c72 -9px 9px, #595c72 -10px 10px, #595c72 -11px 11px,
+    #595c72 -12px 12px, #595c72 -13px 13px, #595c72 -14px 14px,
+    #595c72 -15px 15px, #595c72 -16px 16px, #595c72 -17px 17px,
+    #595c72 -18px 18px, #595c72 -19px 19px, #595c72 -20px 20px,
+    #595c72 -21px 21px, #595c72 -22px 22px, #595c72 -23px 23px,
+    #595c72 -24px 24px, #595c72 -25px 25px, #595c72 -26px 26px,
+    #595c72 -27px 27px, #595c72 -28px 28px, #595c72 -29px 29px,
+    #595c72 -30px 30px, #595c72 -31px 31px, #595c72 -32px 32px,
+    #595c72 -33px 33px, #595c72 -34px 34px, #595c72 -35px 35px,
+    #595c72 -36px 36px, #595c72 -37px 37px, #595c72 -38px 38px,
+    #595c72 -39px 39px, #595c72 -40px 40px, #595c72 -41px 41px,
+    #595c72 -42px 42px, #595c72 -43px 43px, #595c72 -44px 44px,
+    #595c72 -45px 45px, #595c72 -46px 46px, #595c72 -47px 47px,
+    #595c72 -48px 48px, #595c72 -49px 49px, #595c72 -50px 50px,
+    #595c72 -51px 51px, #595c72 -52px 52px, #595c72 -53px 53px,
+    #595c72 -54px 54px, #595c72 -55px 55px, #595c72 -56px 56px,
+    #595c72 -57px 57px, #595c72 -58px 58px, #595c72 -59px 59px,
+    #595c72 -60px 60px, #595c72 -61px 61px, #595c72 -62px 62px,
+    #595c72 -63px 63px, #595c72 -64px 64px, #595c72 -65px 65px,
+    #595c72 -66px 66px, #595c72 -67px 67px, #595c72 -68px 68px,
+    #595c72 -69px 69px, #595c72 -70px 70px;
+}
+
+.ored span {
+  text-shadow: #703f3f -1px 1px, #703f3f -2px 2px, #703f3f -3px 3px,
+    #703f3f -4px 4px, #703f3f -5px 5px, #703f3f -6px 6px, #703f3f -7px 7px,
+    #703f3f -8px 8px, #703f3f -9px 9px, #703f3f -10px 10px, #703f3f -11px 11px,
+    #703f3f -12px 12px, #703f3f -13px 13px, #703f3f -14px 14px,
+    #703f3f -15px 15px, #703f3f -16px 16px, #703f3f -17px 17px,
+    #703f3f -18px 18px, #703f3f -19px 19px, #703f3f -20px 20px,
+    #703f3f -21px 21px, #703f3f -22px 22px, #703f3f -23px 23px,
+    #703f3f -24px 24px, #703f3f -25px 25px, #703f3f -26px 26px,
+    #703f3f -27px 27px, #703f3f -28px 28px, #703f3f -29px 29px,
+    #703f3f -30px 30px, #703f3f -31px 31px, #703f3f -32px 32px,
+    #703f3f -33px 33px, #703f3f -34px 34px, #703f3f -35px 35px,
+    #703f3f -36px 36px, #703f3f -37px 37px, #703f3f -38px 38px,
+    #703f3f -39px 39px, #703f3f -40px 40px, #703f3f -41px 41px,
+    #703f3f -42px 42px, #703f3f -43px 43px, #703f3f -44px 44px,
+    #703f3f -45px 45px, #703f3f -46px 46px, #703f3f -47px 47px,
+    #703f3f -48px 48px, #703f3f -49px 49px, #703f3f -50px 50px,
+    #703f3f -51px 51px, #703f3f -52px 52px, #703f3f -53px 53px,
+    #703f3f -54px 54px, #703f3f -55px 55px, #703f3f -56px 56px,
+    #703f3f -57px 57px, #703f3f -58px 58px, #703f3f -59px 59px,
+    #703f3f -60px 60px, #703f3f -61px 61px, #703f3f -62px 62px,
+    #703f3f -63px 63px, #703f3f -64px 64px, #703f3f -65px 65px,
+    #703f3f -66px 66px, #703f3f -67px 67px, #703f3f -68px 68px,
+    #703f3f -69px 69px, #703f3f -70px 70px;
+}
+
+.ogreen span {
+  text-shadow: #587b67 -1px 1px, #587b67 -2px 2px, #587b67 -3px 3px,
+    #587b67 -4px 4px, #587b67 -5px 5px, #587b67 -6px 6px, #587b67 -7px 7px,
+    #587b67 -8px 8px, #587b67 -9px 9px, #587b67 -10px 10px, #587b67 -11px 11px,
+    #587b67 -12px 12px, #587b67 -13px 13px, #587b67 -14px 14px,
+    #587b67 -15px 15px, #587b67 -16px 16px, #587b67 -17px 17px,
+    #587b67 -18px 18px, #587b67 -19px 19px, #587b67 -20px 20px,
+    #587b67 -21px 21px, #587b67 -22px 22px, #587b67 -23px 23px,
+    #587b67 -24px 24px, #587b67 -25px 25px, #587b67 -26px 26px,
+    #587b67 -27px 27px, #587b67 -28px 28px, #587b67 -29px 29px,
+    #587b67 -30px 30px, #587b67 -31px 31px, #587b67 -32px 32px,
+    #587b67 -33px 33px, #587b67 -34px 34px, #587b67 -35px 35px,
+    #587b67 -36px 36px, #587b67 -37px 37px, #587b67 -38px 38px,
+    #587b67 -39px 39px, #587b67 -40px 40px, #587b67 -41px 41px,
+    #587b67 -42px 42px, #587b67 -43px 43px, #587b67 -44px 44px,
+    #587b67 -45px 45px, #587b67 -46px 46px, #587b67 -47px 47px,
+    #587b67 -48px 48px, #587b67 -49px 49px, #587b67 -50px 50px,
+    #587b67 -51px 51px, #587b67 -52px 52px, #587b67 -53px 53px,
+    #587b67 -54px 54px, #587b67 -55px 55px, #587b67 -56px 56px,
+    #587b67 -57px 57px, #587b67 -58px 58px, #587b67 -59px 59px,
+    #587b67 -60px 60px, #587b67 -61px 61px, #587b67 -62px 62px,
+    #587b67 -63px 63px, #587b67 -64px 64px, #587b67 -65px 65px,
+    #587b67 -66px 66px, #587b67 -67px 67px, #587b67 -68px 68px,
+    #587b67 -69px 69px, #587b67 -70px 70px;
+}
diff --git a/tools/gen_addon_icon.py b/tools/gen_addon_icon.py
index 7b80f821..c90ab80f 100644
--- a/tools/gen_addon_icon.py
+++ b/tools/gen_addon_icon.py
@@ -5,6 +5,9 @@
 import os
 import shutil
 import click
+import asyncio
+from pyppeteer import launch
+from string import Template
 
 from .gitutils import commit_if_needed
 from .manifest import read_manifest, find_addons, NoManifestFound
@@ -14,8 +17,7 @@
 
 ICON_TYPE = 'png'
 
-ICON_TYPES = ['png', 'svg']
-
+ICON_TYPES = ['png', 'svg', 'pdf']
 
 def gen_one_addon_icon(icon_dir, filetype=ICON_TYPE):
     icon_filename = os.path.join(icon_dir, 'icon.%s' % filetype)
@@ -30,6 +32,69 @@ def gen_one_addon_icon(icon_dir, filetype=ICON_TYPE):
         return icon_filename
     return None
 
+async def generate_template_screenshot(
+        template, options, styles_filename, filetype
+    ):
+    """Generate icon with chromium"""
+    browser = await launch()
+    page = await browser.newPage()
+    await page.goto('data:text/html,{}'.format(template))
+    await page.addStyleTag({"path": styles_filename})
+    if filetype in ["png", "jpg"]:
+        await page.emulateMedia("screen") 
+        await page.screenshot(options)
+    else:
+        await page.pdf(options)
+    await browser.close()
+
+def gen_special_addon_icon(
+        icon_dir, icon_set_params, icon_color, icon_padding, filetype
+    ):
+    """Generate icons using popular icon libraries like fontawesome, etc"""
+    icon_filename = os.path.join(icon_dir, "icon.%s" % filetype)
+    styles_filename = os.path.join(
+        os.path.dirname(__file__), "gen_addon_icon.css")
+    if filetype in ["png", "jpg"]:
+        options = {
+            'path': icon_filename,
+            'omitBackground': True,
+            'clip': {
+                'y': 0,
+                'x': 0,
+                'width': 128,
+                'height': 128,
+            }
+        }
+    else:
+        options = {
+            'path': icon_filename,
+            'width': 128,
+            'height': 128,
+            'printBackground': True,
+        }
+    template = Template("""
+    <html>
+        <head>
+            <link type="text/css" rel="stylesheet" href="file://{}" />
+        </head>
+        <body>
+            <div class="icon-box o$icon_color">
+                <span>
+                    <i class="$icon_set_params"></i>
+                </span>
+            </div>
+        </body>
+    </html>
+    """.format(styles_filename))
+    template = template.substitute(
+        icon_set_params=icon_set_params,
+        icon_color=icon_color,
+    )
+    if not os.path.exists(icon_dir):
+        os.makedirs(icon_dir)
+    asyncio.get_event_loop().run_until_complete(generate_template_screenshot(
+        template, options, styles_filename, filetype))
+    return icon_filename
 
 @click.command()
 @click.option('--addon-dir', 'addon_dirs',
@@ -43,7 +108,17 @@ def gen_one_addon_icon(icon_dir, filetype=ICON_TYPE):
                    "put for all installable addons found there.")
 @click.option('--commit/--no-commit',
               help="git commit icon, if not any.")
-def gen_addon_icon(addon_dirs, addons_dir, commit):
+@click.option('--icon-set-params',
+               help="Use this set to generate an automatic icon")
+@click.option('--icon-color',
+               help="Options: orange, pink, yellow, gray, teal, blue, red, green")
+@click.option('--icon-padding',
+               help="Default is 0 but play with it to better center different icons")
+@click.option('--format',
+               help="Icon format, you can choose between png or pdf")
+def gen_addon_icon(
+        addon_dirs, addons_dir, commit, icon_set_params, icon_color, icon_padding,
+        format):
     """ Put default OCA icon of type ICON_TYPE.
 
     Do nothing if the icon already exists in ICONS_DIR, otherwise put
@@ -71,11 +146,24 @@ def gen_addon_icon(addon_dirs, addons_dir, commit):
                 # icon was created manually
                 exist = True
                 break
-        if exist:
+        if exist and not icon_set_params:
             continue
-        icon_filename = gen_one_addon_icon(icon_dir)
+        if icon_set_params:
+            # Apply some default so we can just put the icon params
+            icon_color = icon_color or "teal"
+            icon_padding = icon_padding or 0
+            if format not in ICON_TYPES:
+                format="png"
+            icon_filename = gen_special_addon_icon(
+                icon_dir, icon_set_params=icon_set_params,
+                icon_color=icon_color, icon_padding=icon_padding,
+                filetype=format
+            )
+        else:
+            icon_filename = gen_one_addon_icon(icon_dir)
         if icon_filename:
             icon_filenames.append(icon_filename)
+           
     if icon_filenames and commit:
         commit_if_needed(icon_filenames, '[ADD] icon.%s' % ICON_TYPE)
 
diff --git a/tools/gen_addon_icon_template.html b/tools/gen_addon_icon_template.html
new file mode 100644
index 00000000..edc52022
--- /dev/null
+++ b/tools/gen_addon_icon_template.html
@@ -0,0 +1,365 @@
+<!-- Choose any icon from one of the following icon sets and replace the class of <i> elements accordingly
+    https://fontawesome.com/icons?d=gallery&m=free
+    https://simplelineicons.github.io/
+    https://useiconic.com/open
+    https://material.io/resources/icons/
+    https://tablericons.com/
+    https://erikflowers.github.io/weather-icons/
+    https://icons.getbootstrap.com/#icons
+    https://remixicon.com/
+/-->
+<html>
+  <head>
+    <style>
+      @import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css";
+      @import "https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css";
+      @import "https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css";
+      @import "https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.2/iconfont/material-icons.min.css";
+      @import "https://cdnjs.cloudflare.com/ajax/libs/tabler-icons/1.35.0/iconfont/tabler-icons.min.css";
+      @import "https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/css/weather-icons.min.css";
+      @import "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css";
+      @import "https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css";
+      @import "https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css";
+      .icon-box {
+        position: relative;
+        text-align: center;
+        overflow: hidden;
+        width: 128px;
+        height: 128px;
+        font-size: 90px;
+        line-height: 120px;
+        border-radius: 6px;
+        border-bottom: 1px solid;
+        border-right: 1px solid;
+        padding: 0;
+      }
+
+      body {
+        width: 128px;
+        height: 128px;
+        background: transparent;
+      }
+
+      .oorange {
+        background: linear-gradient(45deg, #cc7039, #da956b);
+        border-top-color: #e7bba2;
+        border-bottom-color: #643f2a;
+      }
+
+      .opink {
+        background: linear-gradient(45deg, #ca5377, #cd7690);
+        border-top-color: #dfa2b4;
+        border-bottom-color: #623241;
+      }
+
+      .oyellow {
+        background: linear-gradient(45deg, #b5aa59a4, #cdc484);
+        border-top-color: #ddd8b1;
+        border-bottom-color: #5b5739;
+      }
+
+      .ogray {
+        background: linear-gradient(45deg, #545554, #797c79);
+        border-bottom-color: #a5a7a5;
+        border-bottom-color: #3a3a3a;
+      }
+
+      .oteal {
+        background: linear-gradient(45deg, #218689, #269396);
+        border-bottom-color: #175557;
+        border-top-color: #78b9ba;
+      }
+
+      .oblue1 {
+        background: linear-gradient(45deg, #6a9eba, #94b6c8);
+        border-top-color: #bbd1dc;
+        border-bottom-color: #3d515c;
+      }
+
+      .oblue2 {
+        background: linear-gradient(45deg, #626584, #797da5);
+        border-top-color: #aaacc3;
+        border-bottom-color: #373946;
+      }
+
+      .ored {
+        background: linear-gradient(45deg, #7c3838, #b06161);
+        border-top-color: #c19393;
+        border-bottom-color: #462727;
+      }
+
+      .ogreen {
+        background: linear-gradient(45deg, #5f8a71, #7cc098);
+        border-top-color: #abd1bb;
+        border-bottom-color: #374c41;
+      }
+
+      .icon-box:before {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+
+      .icon-box span {
+        display: block;
+        height: 128px;
+        width: 128px;
+        color: #fff;
+        padding: 15;
+      }
+
+      .oorange span {
+        text-shadow: #a16542 -1px 1px, #a16542 -2px 2px, #a16542 -3px 3px,
+          #a16542 -4px 4px, #a16542 -5px 5px, #a16542 -6px 6px, #a16542 -7px 7px,
+          #a16542 -8px 8px, #a16542 -9px 9px, #a16542 -10px 10px,
+          #a16542 -11px 11px, #a16542 -12px 12px, #a16542 -13px 13px,
+          #a16542 -14px 14px, #a16542 -15px 15px, #a16542 -16px 16px,
+          #a16542 -17px 17px, #a16542 -18px 18px, #a16542 -19px 19px,
+          #a16542 -20px 20px, #a16542 -21px 21px, #a16542 -22px 22px,
+          #a16542 -23px 23px, #a16542 -24px 24px, #a16542 -25px 25px,
+          #a16542 -26px 26px, #a16542 -27px 27px, #a16542 -28px 28px,
+          #a16542 -29px 29px, #a16542 -30px 30px, #a16542 -31px 31px,
+          #a16542 -32px 32px, #a16542 -33px 33px, #a16542 -34px 34px,
+          #a16542 -35px 35px, #a16542 -36px 36px, #a16542 -37px 37px,
+          #a16542 -38px 38px, #a16542 -39px 39px, #a16542 -40px 40px,
+          #a16542 -41px 41px, #a16542 -42px 42px, #a16542 -43px 43px,
+          #a16542 -44px 44px, #a16542 -45px 45px, #a16542 -46px 46px,
+          #a16542 -47px 47px, #a16542 -48px 48px, #a16542 -49px 49px,
+          #a16542 -50px 50px, #a16542 -51px 51px, #a16542 -52px 52px,
+          #a16542 -53px 53px, #a16542 -54px 54px, #a16542 -55px 55px,
+          #a16542 -56px 56px, #a16542 -57px 57px, #a16542 -58px 58px,
+          #a16542 -59px 59px, #a16542 -60px 60px, #a16542 -61px 61px,
+          #a16542 -62px 62px, #a16542 -63px 63px, #a16542 -64px 64px,
+          #a16542 -65px 65px, #a16542 -66px 66px, #a16542 -67px 67px,
+          #a16542 -68px 68px, #a16542 -69px 69px, #a16542 -70px 70px;
+      }
+
+      .opink span {
+        text-shadow: #9e5168 -1px 1px, #9e5168 -2px 2px, #9e5168 -3px 3px,
+          #9e5168 -4px 4px, #9e5168 -5px 5px, #9e5168 -6px 6px, #9e5168 -7px 7px,
+          #9e5168 -8px 8px, #9e5168 -9px 9px, #9e5168 -10px 10px,
+          #9e5168 -11px 11px, #9e5168 -12px 12px, #9e5168 -13px 13px,
+          #9e5168 -14px 14px, #9e5168 -15px 15px, #9e5168 -16px 16px,
+          #9e5168 -17px 17px, #9e5168 -18px 18px, #9e5168 -19px 19px,
+          #9e5168 -20px 20px, #9e5168 -21px 21px, #9e5168 -22px 22px,
+          #9e5168 -23px 23px, #9e5168 -24px 24px, #9e5168 -25px 25px,
+          #9e5168 -26px 26px, #9e5168 -27px 27px, #9e5168 -28px 28px,
+          #9e5168 -29px 29px, #9e5168 -30px 30px, #9e5168 -31px 31px,
+          #9e5168 -32px 32px, #9e5168 -33px 33px, #9e5168 -34px 34px,
+          #9e5168 -35px 35px, #9e5168 -36px 36px, #9e5168 -37px 37px,
+          #9e5168 -38px 38px, #9e5168 -39px 39px, #9e5168 -40px 40px,
+          #9e5168 -41px 41px, #9e5168 -42px 42px, #9e5168 -43px 43px,
+          #9e5168 -44px 44px, #9e5168 -45px 45px, #9e5168 -46px 46px,
+          #9e5168 -47px 47px, #9e5168 -48px 48px, #9e5168 -49px 49px,
+          #9e5168 -50px 50px, #9e5168 -51px 51px, #9e5168 -52px 52px,
+          #9e5168 -53px 53px, #9e5168 -54px 54px, #9e5168 -55px 55px,
+          #9e5168 -56px 56px, #9e5168 -57px 57px, #9e5168 -58px 58px,
+          #9e5168 -59px 59px, #9e5168 -60px 60px, #9e5168 -61px 61px,
+          #9e5168 -62px 62px, #9e5168 -63px 63px, #9e5168 -64px 64px,
+          #9e5168 -65px 65px, #9e5168 -66px 66px, #9e5168 -67px 67px,
+          #9e5168 -68px 68px, #9e5168 -69px 69px, #9e5168 -70px 70px;
+      }
+
+      .oyellow span {
+        text-shadow: #938c57 -1px 1px, #938c57 -2px 2px, #938c57 -3px 3px,
+          #938c57 -4px 4px, #938c57 -5px 5px, #938c57 -6px 6px, #938c57 -7px 7px,
+          #938c57 -8px 8px, #938c57 -9px 9px, #938c57 -10px 10px,
+          #938c57 -11px 11px, #938c57 -12px 12px, #938c57 -13px 13px,
+          #938c57 -14px 14px, #938c57 -15px 15px, #938c57 -16px 16px,
+          #938c57 -17px 17px, #938c57 -18px 18px, #938c57 -19px 19px,
+          #938c57 -20px 20px, #938c57 -21px 21px, #938c57 -22px 22px,
+          #938c57 -23px 23px, #938c57 -24px 24px, #938c57 -25px 25px,
+          #938c57 -26px 26px, #938c57 -27px 27px, #938c57 -28px 28px,
+          #938c57 -29px 29px, #938c57 -30px 30px, #938c57 -31px 31px,
+          #938c57 -32px 32px, #938c57 -33px 33px, #938c57 -34px 34px,
+          #938c57 -35px 35px, #938c57 -36px 36px, #938c57 -37px 37px,
+          #938c57 -38px 38px, #938c57 -39px 39px, #938c57 -40px 40px,
+          #938c57 -41px 41px, #938c57 -42px 42px, #938c57 -43px 43px,
+          #938c57 -44px 44px, #938c57 -45px 45px, #938c57 -46px 46px,
+          #938c57 -47px 47px, #938c57 -48px 48px, #938c57 -49px 49px,
+          #938c57 -50px 50px, #938c57 -51px 51px, #938c57 -52px 52px,
+          #938c57 -53px 53px, #938c57 -54px 54px, #938c57 -55px 55px,
+          #938c57 -56px 56px, #938c57 -57px 57px, #938c57 -58px 58px,
+          #938c57 -59px 59px, #938c57 -60px 60px, #938c57 -61px 61px,
+          #938c57 -62px 62px, #938c57 -63px 63px, #938c57 -64px 64px,
+          #938c57 -65px 65px, #938c57 -66px 66px, #938c57 -67px 67px,
+          #938c57 -68px 68px, #938c57 -69px 69px, #938c57 -70px 70px;
+      }
+
+      .ogray span {
+        text-shadow: #525352 -1px 1px, #525352 -2px 2px, #525352 -3px 3px,
+          #525352 -4px 4px, #525352 -5px 5px, #525352 -6px 6px, #525352 -7px 7px,
+          #525352 -8px 8px, #525352 -9px 9px, #525352 -10px 10px,
+          #525352 -11px 11px, #525352 -12px 12px, #525352 -13px 13px,
+          #525352 -14px 14px, #525352 -15px 15px, #525352 -16px 16px,
+          #525352 -17px 17px, #525352 -18px 18px, #525352 -19px 19px,
+          #525352 -20px 20px, #525352 -21px 21px, #525352 -22px 22px,
+          #525352 -23px 23px, #525352 -24px 24px, #525352 -25px 25px,
+          #525352 -26px 26px, #525352 -27px 27px, #525352 -28px 28px,
+          #525352 -29px 29px, #525352 -30px 30px, #525352 -31px 31px,
+          #525352 -32px 32px, #525352 -33px 33px, #525352 -34px 34px,
+          #525352 -35px 35px, #525352 -36px 36px, #525352 -37px 37px,
+          #525352 -38px 38px, #525352 -39px 39px, #525352 -40px 40px,
+          #525352 -41px 41px, #525352 -42px 42px, #525352 -43px 43px,
+          #525352 -44px 44px, #525352 -45px 45px, #525352 -46px 46px,
+          #525352 -47px 47px, #525352 -48px 48px, #525352 -49px 49px,
+          #525352 -50px 50px, #525352 -51px 51px, #525352 -52px 52px,
+          #525352 -53px 53px, #525352 -54px 54px, #525352 -55px 55px,
+          #525352 -56px 56px, #525352 -57px 57px, #525352 -58px 58px,
+          #525352 -59px 59px, #525352 -60px 60px, #525352 -61px 61px,
+          #525352 -62px 62px, #525352 -63px 63px, #525352 -64px 64px,
+          #525352 -65px 65px, #525352 -66px 66px, #525352 -67px 67px,
+          #525352 -68px 68px, #525352 -69px 69px, #525352 -70px 70px;
+      }
+
+      .oteal span {
+        text-shadow: #297072 -1px 1px, #297072 -2px 2px, #297072 -3px 3px,
+          #297072 -4px 4px, #297072 -5px 5px, #297072 -6px 6px, #297072 -7px 7px,
+          #297072 -8px 8px, #297072 -9px 9px, #297072 -10px 10px,
+          #297072 -11px 11px, #297072 -12px 12px, #297072 -13px 13px,
+          #297072 -14px 14px, #297072 -15px 15px, #297072 -16px 16px,
+          #297072 -17px 17px, #297072 -18px 18px, #297072 -19px 19px,
+          #297072 -20px 20px, #297072 -21px 21px, #297072 -22px 22px,
+          #297072 -23px 23px, #297072 -24px 24px, #297072 -25px 25px,
+          #297072 -26px 26px, #297072 -27px 27px, #297072 -28px 28px,
+          #297072 -29px 29px, #297072 -30px 30px, #297072 -31px 31px,
+          #297072 -32px 32px, #297072 -33px 33px, #297072 -34px 34px,
+          #297072 -35px 35px, #297072 -36px 36px, #297072 -37px 37px,
+          #297072 -38px 38px, #297072 -39px 39px, #297072 -40px 40px,
+          #297072 -41px 41px, #297072 -42px 42px, #297072 -43px 43px,
+          #297072 -44px 44px, #297072 -45px 45px, #297072 -46px 46px,
+          #297072 -47px 47px, #297072 -48px 48px, #297072 -49px 49px,
+          #297072 -50px 50px, #297072 -51px 51px, #297072 -52px 52px,
+          #297072 -53px 53px, #297072 -54px 54px, #297072 -55px 55px,
+          #297072 -56px 56px, #297072 -57px 57px, #297072 -58px 58px,
+          #297072 -59px 59px, #297072 -60px 60px, #297072 -61px 61px,
+          #297072 -62px 62px, #297072 -63px 63px, #297072 -64px 64px,
+          #297072 -65px 65px, #297072 -66px 66px, #297072 -67px 67px,
+          #297072 -68px 68px, #297072 -69px 69px, #297072 -70px 70px;
+      }
+
+      .oblue1 span {
+        text-shadow: #628395 -1px 1px, #628395 -2px 2px, #628395 -3px 3px,
+          #628395 -4px 4px, #628395 -5px 5px, #628395 -6px 6px, #628395 -7px 7px,
+          #628395 -8px 8px, #628395 -9px 9px, #628395 -10px 10px,
+          #628395 -11px 11px, #628395 -12px 12px, #628395 -13px 13px,
+          #628395 -14px 14px, #628395 -15px 15px, #628395 -16px 16px,
+          #628395 -17px 17px, #628395 -18px 18px, #628395 -19px 19px,
+          #628395 -20px 20px, #628395 -21px 21px, #628395 -22px 22px,
+          #628395 -23px 23px, #628395 -24px 24px, #628395 -25px 25px,
+          #628395 -26px 26px, #628395 -27px 27px, #628395 -28px 28px,
+          #628395 -29px 29px, #628395 -30px 30px, #628395 -31px 31px,
+          #628395 -32px 32px, #628395 -33px 33px, #628395 -34px 34px,
+          #628395 -35px 35px, #628395 -36px 36px, #628395 -37px 37px,
+          #628395 -38px 38px, #628395 -39px 39px, #628395 -40px 40px,
+          #628395 -41px 41px, #628395 -42px 42px, #628395 -43px 43px,
+          #628395 -44px 44px, #628395 -45px 45px, #628395 -46px 46px,
+          #628395 -47px 47px, #628395 -48px 48px, #628395 -49px 49px,
+          #628395 -50px 50px, #628395 -51px 51px, #628395 -52px 52px,
+          #628395 -53px 53px, #628395 -54px 54px, #628395 -55px 55px,
+          #628395 -56px 56px, #628395 -57px 57px, #628395 -58px 58px,
+          #628395 -59px 59px, #628395 -60px 60px, #628395 -61px 61px,
+          #628395 -62px 62px, #628395 -63px 63px, #628395 -64px 64px,
+          #628395 -65px 65px, #628395 -66px 66px, #628395 -67px 67px,
+          #628395 -68px 68px, #628395 -69px 69px, #628395 -70px 70px;
+      }
+
+      .oblue2 span {
+        text-shadow: #595c72 -1px 1px, #595c72 -2px 2px, #595c72 -3px 3px,
+          #595c72 -4px 4px, #595c72 -5px 5px, #595c72 -6px 6px, #595c72 -7px 7px,
+          #595c72 -8px 8px, #595c72 -9px 9px, #595c72 -10px 10px,
+          #595c72 -11px 11px, #595c72 -12px 12px, #595c72 -13px 13px,
+          #595c72 -14px 14px, #595c72 -15px 15px, #595c72 -16px 16px,
+          #595c72 -17px 17px, #595c72 -18px 18px, #595c72 -19px 19px,
+          #595c72 -20px 20px, #595c72 -21px 21px, #595c72 -22px 22px,
+          #595c72 -23px 23px, #595c72 -24px 24px, #595c72 -25px 25px,
+          #595c72 -26px 26px, #595c72 -27px 27px, #595c72 -28px 28px,
+          #595c72 -29px 29px, #595c72 -30px 30px, #595c72 -31px 31px,
+          #595c72 -32px 32px, #595c72 -33px 33px, #595c72 -34px 34px,
+          #595c72 -35px 35px, #595c72 -36px 36px, #595c72 -37px 37px,
+          #595c72 -38px 38px, #595c72 -39px 39px, #595c72 -40px 40px,
+          #595c72 -41px 41px, #595c72 -42px 42px, #595c72 -43px 43px,
+          #595c72 -44px 44px, #595c72 -45px 45px, #595c72 -46px 46px,
+          #595c72 -47px 47px, #595c72 -48px 48px, #595c72 -49px 49px,
+          #595c72 -50px 50px, #595c72 -51px 51px, #595c72 -52px 52px,
+          #595c72 -53px 53px, #595c72 -54px 54px, #595c72 -55px 55px,
+          #595c72 -56px 56px, #595c72 -57px 57px, #595c72 -58px 58px,
+          #595c72 -59px 59px, #595c72 -60px 60px, #595c72 -61px 61px,
+          #595c72 -62px 62px, #595c72 -63px 63px, #595c72 -64px 64px,
+          #595c72 -65px 65px, #595c72 -66px 66px, #595c72 -67px 67px,
+          #595c72 -68px 68px, #595c72 -69px 69px, #595c72 -70px 70px;
+      }
+
+      .ored span {
+        text-shadow: #703f3f -1px 1px, #703f3f -2px 2px, #703f3f -3px 3px,
+          #703f3f -4px 4px, #703f3f -5px 5px, #703f3f -6px 6px, #703f3f -7px 7px,
+          #703f3f -8px 8px, #703f3f -9px 9px, #703f3f -10px 10px,
+          #703f3f -11px 11px, #703f3f -12px 12px, #703f3f -13px 13px,
+          #703f3f -14px 14px, #703f3f -15px 15px, #703f3f -16px 16px,
+          #703f3f -17px 17px, #703f3f -18px 18px, #703f3f -19px 19px,
+          #703f3f -20px 20px, #703f3f -21px 21px, #703f3f -22px 22px,
+          #703f3f -23px 23px, #703f3f -24px 24px, #703f3f -25px 25px,
+          #703f3f -26px 26px, #703f3f -27px 27px, #703f3f -28px 28px,
+          #703f3f -29px 29px, #703f3f -30px 30px, #703f3f -31px 31px,
+          #703f3f -32px 32px, #703f3f -33px 33px, #703f3f -34px 34px,
+          #703f3f -35px 35px, #703f3f -36px 36px, #703f3f -37px 37px,
+          #703f3f -38px 38px, #703f3f -39px 39px, #703f3f -40px 40px,
+          #703f3f -41px 41px, #703f3f -42px 42px, #703f3f -43px 43px,
+          #703f3f -44px 44px, #703f3f -45px 45px, #703f3f -46px 46px,
+          #703f3f -47px 47px, #703f3f -48px 48px, #703f3f -49px 49px,
+          #703f3f -50px 50px, #703f3f -51px 51px, #703f3f -52px 52px,
+          #703f3f -53px 53px, #703f3f -54px 54px, #703f3f -55px 55px,
+          #703f3f -56px 56px, #703f3f -57px 57px, #703f3f -58px 58px,
+          #703f3f -59px 59px, #703f3f -60px 60px, #703f3f -61px 61px,
+          #703f3f -62px 62px, #703f3f -63px 63px, #703f3f -64px 64px,
+          #703f3f -65px 65px, #703f3f -66px 66px, #703f3f -67px 67px,
+          #703f3f -68px 68px, #703f3f -69px 69px, #703f3f -70px 70px;
+      }
+
+      .ogreen span {
+        text-shadow: #587b67 -1px 1px, #587b67 -2px 2px, #587b67 -3px 3px,
+          #587b67 -4px 4px, #587b67 -5px 5px, #587b67 -6px 6px, #587b67 -7px 7px,
+          #587b67 -8px 8px, #587b67 -9px 9px, #587b67 -10px 10px,
+          #587b67 -11px 11px, #587b67 -12px 12px, #587b67 -13px 13px,
+          #587b67 -14px 14px, #587b67 -15px 15px, #587b67 -16px 16px,
+          #587b67 -17px 17px, #587b67 -18px 18px, #587b67 -19px 19px,
+          #587b67 -20px 20px, #587b67 -21px 21px, #587b67 -22px 22px,
+          #587b67 -23px 23px, #587b67 -24px 24px, #587b67 -25px 25px,
+          #587b67 -26px 26px, #587b67 -27px 27px, #587b67 -28px 28px,
+          #587b67 -29px 29px, #587b67 -30px 30px, #587b67 -31px 31px,
+          #587b67 -32px 32px, #587b67 -33px 33px, #587b67 -34px 34px,
+          #587b67 -35px 35px, #587b67 -36px 36px, #587b67 -37px 37px,
+          #587b67 -38px 38px, #587b67 -39px 39px, #587b67 -40px 40px,
+          #587b67 -41px 41px, #587b67 -42px 42px, #587b67 -43px 43px,
+          #587b67 -44px 44px, #587b67 -45px 45px, #587b67 -46px 46px,
+          #587b67 -47px 47px, #587b67 -48px 48px, #587b67 -49px 49px,
+          #587b67 -50px 50px, #587b67 -51px 51px, #587b67 -52px 52px,
+          #587b67 -53px 53px, #587b67 -54px 54px, #587b67 -55px 55px,
+          #587b67 -56px 56px, #587b67 -57px 57px, #587b67 -58px 58px,
+          #587b67 -59px 59px, #587b67 -60px 60px, #587b67 -61px 61px,
+          #587b67 -62px 62px, #587b67 -63px 63px, #587b67 -64px 64px,
+          #587b67 -65px 65px, #587b67 -66px 66px, #587b67 -67px 67px,
+          #587b67 -68px 68px, #587b67 -69px 69px, #587b67 -70px 70px;
+      }
+
+      html {
+        text-align: center;
+        background-color: transparent;
+        height: 100%;
+      }
+
+      #container div {
+        display: inline-block;
+        margin: 0.5em;
+      }
+    </style>
+  </head>
+  <!-- Actual template -->
+  <body>
+    <div class="icon-box o$icon_color">
+      <span><i class="$icon_set_params"></i></span>
+    </div>
+  </body>
+</html>