diff --git a/app/ns-ui-category/icon-fonts/basics/article.md b/app/ns-ui-category/icon-fonts/basics/article.md
deleted file mode 100644
index 4b751ff..0000000
--- a/app/ns-ui-category/icon-fonts/basics/article.md
+++ /dev/null
@@ -1,5 +0,0 @@
-
-The example demonstrates, how to use setup the  `font-family` property via CSS and how to define the needed icons via XML.
-
-<snippet id='icon-font-xml-def'/>
-<snippet id='icon-font-css-class-def'/>
diff --git a/app/ns-ui-category/icon-fonts/icon-fonts-page.js b/app/ns-ui-category/icon-fonts/icon-fonts-page.js
index ab55f4a..47cd3f5 100644
--- a/app/ns-ui-category/icon-fonts/icon-fonts-page.js
+++ b/app/ns-ui-category/icon-fonts/icon-fonts-page.js
@@ -1,11 +1,11 @@
 const ListViewLinksModel = require("../../links-view-model");
 const link = require("../../link");
 const navigationLinks = [
-    new link("Basics", "ns-ui-category/icon-fonts/basics/basics-page"),
-    new link("Code Behind", "ns-ui-category/icon-fonts/code-behind/code-behind-page")
+    new link("Usage", "ns-ui-category/icon-fonts/usage/usage-page"),
+    new link("Tips & Tricks", "ns-ui-category/icon-fonts/tips-and-tricks/tips-and-tricks-page")
 ];
 const navigationLinksTsc = [
-    new link("Code Behind", "ns-ui-category/icon-fonts/code-behind/code-behind-ts-page")
+    new link("Tips & Tricks", "ns-ui-category/icon-fonts/tips-and-tricks/tips-and-tricks-ts-page")
 ];
 function onNavigatingTo(args) {
     const page = args.object;
diff --git a/app/ns-ui-category/icon-fonts/metadata.md b/app/ns-ui-category/icon-fonts/metadata.md
index 241a708..5130071 100644
--- a/app/ns-ui-category/icon-fonts/metadata.md
+++ b/app/ns-ui-category/icon-fonts/metadata.md
@@ -5,3 +5,4 @@ position: 265
 slug: icon-fonts
 previous_url: /icon-fonts
 ---
+example-order: usage, tips-and-tricks
\ No newline at end of file
diff --git a/app/ns-ui-category/icon-fonts/code-behind/article.md b/app/ns-ui-category/icon-fonts/tips-and-tricks/article.md
similarity index 100%
rename from app/ns-ui-category/icon-fonts/code-behind/article.md
rename to app/ns-ui-category/icon-fonts/tips-and-tricks/article.md
diff --git a/app/ns-ui-category/icon-fonts/code-behind/code-behind-page.css b/app/ns-ui-category/icon-fonts/tips-and-tricks/tips-and-tricks-page.css
similarity index 100%
rename from app/ns-ui-category/icon-fonts/code-behind/code-behind-page.css
rename to app/ns-ui-category/icon-fonts/tips-and-tricks/tips-and-tricks-page.css
diff --git a/app/ns-ui-category/icon-fonts/code-behind/code-behind-page.js b/app/ns-ui-category/icon-fonts/tips-and-tricks/tips-and-tricks-page.js
similarity index 100%
rename from app/ns-ui-category/icon-fonts/code-behind/code-behind-page.js
rename to app/ns-ui-category/icon-fonts/tips-and-tricks/tips-and-tricks-page.js
diff --git a/app/ns-ui-category/icon-fonts/code-behind/code-behind-page.xml b/app/ns-ui-category/icon-fonts/tips-and-tricks/tips-and-tricks-page.xml
similarity index 100%
rename from app/ns-ui-category/icon-fonts/code-behind/code-behind-page.xml
rename to app/ns-ui-category/icon-fonts/tips-and-tricks/tips-and-tricks-page.xml
diff --git a/app/ns-ui-category/icon-fonts/code-behind/code-behind-ts-page.css b/app/ns-ui-category/icon-fonts/tips-and-tricks/tips-and-tricks-ts-page.css
similarity index 100%
rename from app/ns-ui-category/icon-fonts/code-behind/code-behind-ts-page.css
rename to app/ns-ui-category/icon-fonts/tips-and-tricks/tips-and-tricks-ts-page.css
diff --git a/app/ns-ui-category/icon-fonts/code-behind/code-behind-ts-page.ts b/app/ns-ui-category/icon-fonts/tips-and-tricks/tips-and-tricks-ts-page.ts
similarity index 100%
rename from app/ns-ui-category/icon-fonts/code-behind/code-behind-ts-page.ts
rename to app/ns-ui-category/icon-fonts/tips-and-tricks/tips-and-tricks-ts-page.ts
diff --git a/app/ns-ui-category/icon-fonts/code-behind/code-behind-ts-page.xml b/app/ns-ui-category/icon-fonts/tips-and-tricks/tips-and-tricks-ts-page.xml
similarity index 100%
rename from app/ns-ui-category/icon-fonts/code-behind/code-behind-ts-page.xml
rename to app/ns-ui-category/icon-fonts/tips-and-tricks/tips-and-tricks-ts-page.xml
diff --git a/app/ns-ui-category/icon-fonts/tips-and-tricks/tips-and-tricksts-page.js b/app/ns-ui-category/icon-fonts/tips-and-tricks/tips-and-tricksts-page.js
new file mode 100644
index 0000000..1e66a62
--- /dev/null
+++ b/app/ns-ui-category/icon-fonts/tips-and-tricks/tips-and-tricksts-page.js
@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var observable_1 = require("tns-core-modules/data/observable");
+function pageLoaded(args) {
+    var page = args.object;
+    var viewModel = new observable_1.Observable();
+    var glyphs = new Array();
+    for (var charCode = 0xe903; charCode <= 0xeaea; charCode++) {
+        var glyph = new observable_1.Observable();
+        glyph.set("icon", String.fromCharCode(charCode));
+        glyph.set("code", charCode.toString(16));
+        glyphs.push(glyph);
+    }
+    viewModel.set("glyphs", glyphs);
+    page.bindingContext = viewModel;
+}
+exports.pageLoaded = pageLoaded;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29kZS1iZWhpbmQtdHMtcGFnZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbImNvZGUtYmVoaW5kLXRzLXBhZ2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFDQSwrREFBeUU7QUFHekUsU0FBZ0IsVUFBVSxDQUFDLElBQWU7SUFDdEMsSUFBTSxJQUFJLEdBQVMsSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUMvQixJQUFNLFNBQVMsR0FBRyxJQUFJLHVCQUFVLEVBQUUsQ0FBQztJQUVuQyxJQUFJLE1BQU0sR0FBRyxJQUFJLEtBQUssRUFBYyxDQUFDO0lBQ3JDLEtBQUssSUFBSSxRQUFRLEdBQUcsTUFBTSxFQUFFLFFBQVEsSUFBSSxNQUFNLEVBQUUsUUFBUSxFQUFFLEVBQUU7UUFDeEQsSUFBTSxLQUFLLEdBQUcsSUFBSSx1QkFBVSxFQUFFLENBQUM7UUFDL0IsS0FBSyxDQUFDLEdBQUcsQ0FBQyxNQUFNLEVBQUUsTUFBTSxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDO1FBQ2pELEtBQUssQ0FBQyxHQUFHLENBQUMsTUFBTSxFQUFFLFFBQVEsQ0FBQyxRQUFRLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUN6QyxNQUFNLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0tBQ3RCO0lBQ0QsU0FBUyxDQUFDLEdBQUcsQ0FBQyxRQUFRLEVBQUUsTUFBTSxDQUFDLENBQUM7SUFFaEMsSUFBSSxDQUFDLGNBQWMsR0FBRyxTQUFTLENBQUM7QUFDcEMsQ0FBQztBQWRELGdDQWNDIiwic291cmNlc0NvbnRlbnQiOlsiLy8gPj4gaWNvbi1mb250LWNvZGUtYmVoaW5kLWNvZGUtdHNcclxuaW1wb3J0IHsgT2JzZXJ2YWJsZSwgRXZlbnREYXRhIH0gZnJvbSBcInRucy1jb3JlLW1vZHVsZXMvZGF0YS9vYnNlcnZhYmxlXCI7XHJcbmltcG9ydCB7IFBhZ2UgfSBmcm9tIFwidG5zLWNvcmUtbW9kdWxlcy91aS9wYWdlXCI7XHJcblxyXG5leHBvcnQgZnVuY3Rpb24gcGFnZUxvYWRlZChhcmdzOiBFdmVudERhdGEpIHtcclxuICAgIGNvbnN0IHBhZ2UgPSA8UGFnZT5hcmdzLm9iamVjdDtcclxuICAgIGNvbnN0IHZpZXdNb2RlbCA9IG5ldyBPYnNlcnZhYmxlKCk7XHJcblxyXG4gICAgbGV0IGdseXBocyA9IG5ldyBBcnJheTxPYnNlcnZhYmxlPigpO1xyXG4gICAgZm9yIChsZXQgY2hhckNvZGUgPSAweGU5MDM7IGNoYXJDb2RlIDw9IDB4ZWFlYTsgY2hhckNvZGUrKykge1xyXG4gICAgICAgIGNvbnN0IGdseXBoID0gbmV3IE9ic2VydmFibGUoKTtcclxuICAgICAgICBnbHlwaC5zZXQoXCJpY29uXCIsIFN0cmluZy5mcm9tQ2hhckNvZGUoY2hhckNvZGUpKTtcclxuICAgICAgICBnbHlwaC5zZXQoXCJjb2RlXCIsIGNoYXJDb2RlLnRvU3RyaW5nKDE2KSk7XHJcbiAgICAgICAgZ2x5cGhzLnB1c2goZ2x5cGgpO1xyXG4gICAgfVxyXG4gICAgdmlld01vZGVsLnNldChcImdseXBoc1wiLCBnbHlwaHMpO1xyXG5cclxuICAgIHBhZ2UuYmluZGluZ0NvbnRleHQgPSB2aWV3TW9kZWw7XHJcbn1cclxuLy8gPDwgaWNvbi1mb250LWNvZGUtYmVoaW5kLWNvZGUtdHNcclxuIl19
\ No newline at end of file
diff --git a/app/ns-ui-category/icon-fonts/usage/article.md b/app/ns-ui-category/icon-fonts/usage/article.md
new file mode 100644
index 0000000..37bae77
--- /dev/null
+++ b/app/ns-ui-category/icon-fonts/usage/article.md
@@ -0,0 +1,12 @@
+
+The example demonstrates, how to use setup the  `font-family` property via CSS and how to define the needed icons via XML.
+
+<snippet id='icon-font-xml-def'/>
+<snippet id='icon-font-css-class-def'/>
+
+WIth NativeScript 6 and above, we can use icon fonts with `Image` elements. For that purpose the `font://` prefix is needed to set the icon font code.
+
+<snippet id='icon-font-xml-images'/>
+<snippet id='icon-font-css-class-def'/>
+
+>> **Note:** Images have specific stretch options (`none`, `aspectFit`, `aspectFill`). At the same time the icon fonts are having `font-size` which can contorl the size of our font. If you want to set the size of your icon through the `font-size` property then set `stretch` property to `none`. Any other values of the stretch property (including the default one) will cause the icon to be resized by measuring the image (or if there is no sizes set, the parent layout in whcih the image is nested).
diff --git a/app/ns-ui-category/icon-fonts/basics/basics-page.css b/app/ns-ui-category/icon-fonts/usage/usage-page.css
similarity index 100%
rename from app/ns-ui-category/icon-fonts/basics/basics-page.css
rename to app/ns-ui-category/icon-fonts/usage/usage-page.css
diff --git a/app/ns-ui-category/icon-fonts/basics/basics-page.js b/app/ns-ui-category/icon-fonts/usage/usage-page.js
similarity index 100%
rename from app/ns-ui-category/icon-fonts/basics/basics-page.js
rename to app/ns-ui-category/icon-fonts/usage/usage-page.js
diff --git a/app/ns-ui-category/icon-fonts/basics/basics-page.xml b/app/ns-ui-category/icon-fonts/usage/usage-page.xml
similarity index 62%
rename from app/ns-ui-category/icon-fonts/basics/basics-page.xml
rename to app/ns-ui-category/icon-fonts/usage/usage-page.xml
index ab99188..24acba5 100644
--- a/app/ns-ui-category/icon-fonts/basics/basics-page.xml
+++ b/app/ns-ui-category/icon-fonts/usage/usage-page.xml
@@ -25,6 +25,17 @@
         <!-- << icon-font-xml-def -->
 
         <!-- Using font icons in Images requires the font:// prefix -->
-        <Image src="font://&#xf019;" class="far"></Image>
+        <Image src="font://&#xf015;" stretch="none" class="fas"></Image>
+
+        <!-- >> icon-font-xml-images -->
+        <!-- 
+            In case, when the stretch property is set to aspectFit or aspectFill
+            the font-sizde will be disreagarderd and the image will take the vailable space
+            assigned through width/height or through its parent size
+
+            Setting the stretch property to none will allow using the font-size property
+        -->
+        <Image src="font://&#xf51e;" stretch="none" class="fas"></Image>
+        <!-- << icon-font-xml-images -->
     </StackLayout>
 </Page>
diff --git a/app/ns-ui-widgets-category/tabs/tabs-page.js b/app/ns-ui-widgets-category/tabs/tabs-page.js
index 672c0fb..36cbe93 100644
--- a/app/ns-ui-widgets-category/tabs/tabs-page.js
+++ b/app/ns-ui-widgets-category/tabs/tabs-page.js
@@ -1,5 +1,6 @@
 const ListViewLinksModel = require("../../links-view-model");
 const link = require("../../link");
+
 const navigationLinks = [
     new link("Usage", "ns-ui-widgets-category/tabs/usage/usage-page"),
     new link("Theming", "ns-ui-widgets-category/tabs/theming/theming-page"),