diff --git a/Oqtane.Application/Server/wwwroot/Modules/Oqtane.Modules.Admin.Login/Module.css b/Oqtane.Application/Server/wwwroot/Modules/Oqtane.Modules.Admin.Login/Module.css
new file mode 100644
index 00000000..086b246b
--- /dev/null
+++ b/Oqtane.Application/Server/wwwroot/Modules/Oqtane.Modules.Admin.Login/Module.css
@@ -0,0 +1,5 @@
+/* Login Module Custom Styles */
+
+.Oqtane-Modules-Admin-Login {
+ width: 200px;
+}
diff --git a/Oqtane.Application/Server/wwwroot/Modules/Oqtane.Modules.HtmlText/Module.css b/Oqtane.Application/Server/wwwroot/Modules/Oqtane.Modules.HtmlText/Module.css
new file mode 100644
index 00000000..5a93c043
--- /dev/null
+++ b/Oqtane.Application/Server/wwwroot/Modules/Oqtane.Modules.HtmlText/Module.css
@@ -0,0 +1 @@
+/* HtmlText Module Custom Styles */
\ No newline at end of file
diff --git a/Oqtane.Application/Server/wwwroot/Oqtane.Server.lib.module.js b/Oqtane.Application/Server/wwwroot/Oqtane.Server.lib.module.js
new file mode 100644
index 00000000..508f42a0
--- /dev/null
+++ b/Oqtane.Application/Server/wwwroot/Oqtane.Server.lib.module.js
@@ -0,0 +1,90 @@
+const pageScriptInfoBySrc = new Map();
+
+function registerPageScriptElement(src) {
+ if (!src) {
+ throw new Error('Must provide a non-empty value for the "src" attribute.');
+ }
+
+ let pageScriptInfo = pageScriptInfoBySrc.get(src);
+
+ if (pageScriptInfo) {
+ pageScriptInfo.referenceCount++;
+ } else {
+ pageScriptInfo = { referenceCount: 1, module: null };
+ pageScriptInfoBySrc.set(src, pageScriptInfo);
+ initializePageScriptModule(src, pageScriptInfo);
+ }
+}
+
+function unregisterPageScriptElement(src) {
+ if (!src) {
+ return;
+ }
+
+ const pageScriptInfo = pageScriptInfoBySrc.get(src);
+ if (!pageScriptInfo) {
+ return;
+ }
+
+ pageScriptInfo.referenceCount--;
+}
+
+async function initializePageScriptModule(src, pageScriptInfo) {
+ // If the path is relative, normalize it by by making it an absolute URL
+ // with document's the base HREF.
+ if (src.startsWith("./")) {
+ src = new URL(src.substr(2), document.baseURI).toString();
+ }
+
+ const module = await import(src);
+
+ if (pageScriptInfo.referenceCount <= 0) {
+ // All page-script elements with the same 'src' were
+ // unregistered while we were loading the module.
+ return;
+ }
+
+ pageScriptInfo.module = module;
+ module.onLoad?.();
+ module.onUpdate?.();
+}
+
+function onEnhancedLoad() {
+ // Start by invoking 'onDispose' on any modules that are no longer referenced.
+ for (const [src, { module, referenceCount }] of pageScriptInfoBySrc) {
+ if (referenceCount <= 0) {
+ module?.onDispose?.();
+ pageScriptInfoBySrc.delete(src);
+ }
+ }
+
+ // Then invoke 'onUpdate' on the remaining modules.
+ for (const { module } of pageScriptInfoBySrc.values()) {
+ module?.onUpdate?.();
+ }
+}
+
+export function afterWebStarted(blazor) {
+ customElements.define('page-script', class extends HTMLElement {
+ static observedAttributes = ['src'];
+
+ // We use attributeChangedCallback instead of connectedCallback
+ // because a page-script element might get reused between enhanced
+ // navigations.
+ attributeChangedCallback(name, oldValue, newValue) {
+ if (name !== 'src') {
+ return;
+ }
+
+ this.src = newValue;
+ unregisterPageScriptElement(oldValue);
+ registerPageScriptElement(newValue);
+ }
+
+ disconnectedCallback() {
+ unregisterPageScriptElement(this.src);
+ }
+ });
+
+ blazor.addEventListener('enhancedload', onEnhancedLoad);
+}
\ No newline at end of file
diff --git a/Oqtane.Application/Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css b/Oqtane.Application/Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css
new file mode 100644
index 00000000..911362c5
--- /dev/null
+++ b/Oqtane.Application/Server/wwwroot/Themes/Oqtane.Themes.BlazorTheme/Theme.css
@@ -0,0 +1,290 @@
+.table > :not(caption) > * > * {
+ box-shadow: none;
+}
+
+.table .form-control {
+ background-color: #ffffff !important;
+ border-width: 0.5px !important;
+ border-bottom-color: #ccc !important;
+ color: #000 !important;
+}
+
+.table .form-select {
+ background-color: #ffffff !important;
+ border-width: 0.5px !important;
+ border-bottom-color: #ccc !important;
+ color: #000 !important;
+}
+
+.table .btn-primary {
+ background-color: var(--bs-primary);
+}
+
+.table .btn-secondary {
+ background-color: var(--bs-secondary);
+}
+
+.alert-dismissible .btn-close {
+ z-index: 1;
+}
+
+.breadcrumbs {
+ background-color: #e6e6e6;
+}
+
+.top-row {
+ height: 3.5rem;
+ display: flex;
+ align-items: center;
+}
+
+.main {
+ flex: 1;
+}
+
+ .main .top-row {
+ background-color: #e6e6e6;
+ border-bottom: 1px solid #d6d5d5;
+ }
+
+.sidebar {
+ background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+ .sidebar .top-row {
+ background-color: rgba(0,0,0,0.4);
+ }
+
+ .sidebar .navbar-toggler .navbar-toggler-icon {
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+ }
+
+ .sidebar .oi {
+ width: 2rem;
+ font-size: 1.1rem;
+ vertical-align: text-top;
+ top: -2px;
+ }
+
+.app-menu {
+ width: 100%
+}
+
+.breadcrumb {
+ margin-bottom: 0;
+}
+
+.app-menu .nav-item {
+ font-size: 0.9rem;
+ padding-bottom: 0.5rem;
+}
+
+.app-menu .nav-item:first-of-type {
+ padding-top: 1rem;
+}
+
+.app-menu .nav-item:last-of-type {
+ padding-bottom: 1rem;
+}
+
+.app-menu .nav-item a {
+ color: #d7d7d7;
+ border-radius: 4px;
+ height: 3rem;
+ display: flex;
+ align-items: center;
+ line-height: 3rem;
+ padding-left: 1rem;
+}
+
+.app-menu .nav-item a.active {
+ background-color: rgba(255,255,255,0.25);
+ color: white;
+}
+
+.app-menu .nav-item a:hover {
+ background-color: rgba(255,255,255,0.1);
+ color: white;
+}
+
+.content {
+ padding-top: 1.1rem;
+}
+
+.navbar-toggler {
+ background-color: rgba(255, 255, 255, 0.1);
+ margin: .5rem;
+}
+
+.app-logo .navbar-brand {
+ color: white;
+}
+@media (max-width: 991.98px) {
+ .app-search {
+ border-radius: 6px;
+ }
+ .app-search input{
+ display: none !important;
+ }
+
+ .app-search input + button {
+ position: initial;
+ padding-top: 7px;
+ padding-bottom: 7px;
+ }
+
+ .app-search:active, .app-search:hover {
+ display: block;
+ position: absolute;
+ color: #fff;
+ top: 0;
+ min-height: 60px;
+ width: 100%;
+ left: 0;
+ z-index: 999;
+ border-radius: 0;
+ background-color: #e6e6e6;
+ }
+
+ .app-search:active .app-form-inline, .app-search:hover .app-form-inline {
+ margin: 10px auto;
+ position: relative;
+ display: block;
+ max-width: 80%;
+ }
+
+ .app-search:active .app-form-inline input, .app-search:hover .app-form-inline input {
+ width: 100%;
+ display: block !important;
+ }
+ .app-search:active .app-form-inline input + button, .app-search:hover .app-form-inline input + button {
+ position: absolute;
+ color: rgb(42, 159, 214);
+ padding-top: 6px;
+ padding-bottom: 6px;
+ }
+}
+@media (max-width: 767.98px) {
+ .main .top-row {
+ display: none;
+ }
+}
+
+@media (min-width: 768px) {
+ app {
+ flex-direction: row;
+ display: block;
+ }
+
+ .app-logo {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .breadcrumbs {
+ position: fixed;
+ left: 275px;
+ top: 15px;
+ z-index: 6
+ }
+
+ .sidebar {
+ width: 250px;
+ height: 100vh;
+ position: sticky;
+ top: 0;
+ z-index: 4
+ }
+
+ .main .top-row {
+ position: sticky;
+ top: 0;
+ z-index: 5
+ }
+
+ .main > div {
+ padding-left: 2rem !important;
+ padding-right: 1.5rem !important;
+ }
+
+ .navbar-toggler {
+ display: none;
+ }
+
+ .sidebar .collapse {
+ /* Never collapse the sidebar for wide screens */
+ display: block;
+ }
+
+ .main > .container {
+ margin-top: 30px;
+ }
+}
+
+@-webkit-keyframes sk-stretchdelay {
+ 0%, 40%, 100% {
+ -webkit-transform: scaleY(0.4)
+ }
+
+ 20% {
+ -webkit-transform: scaleY(1.0)
+ }
+}
+
+@keyframes sk-stretchdelay {
+ 0%, 40%, 100% {
+ transform: scaleY(0.4);
+ -webkit-transform: scaleY(0.4);
+ }
+
+ 20% {
+ transform: scaleY(1.0);
+ -webkit-transform: scaleY(1.0);
+ }
+}
+
+@media (max-width: 767.98px) {
+ .app-logo {
+ height: 80px;
+ display: flex;
+ align-items: center;
+ }
+
+ .breadcrumbs {
+ position: fixed;
+ top: 150px;
+ width: 100%;
+ left: 0;
+ z-index: 4;
+ border-bottom: 1px solid #d6d5d5;
+ }
+
+ .sidebar {
+ margin-top: 3.5rem;
+ position: fixed;
+ width: 100%;
+ z-index: 4;
+ }
+
+ .main .top-row {
+ z-index: 4;
+ }
+
+ .main > .top-row.px-4 {
+ display: flex;
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: 100%;
+ }
+
+ .ml-md-auto {
+ margin-left: auto;
+ }
+
+ .main > .container {
+ margin-top: 200px;
+ }
+}
+
diff --git a/Oqtane.Application/Server/wwwroot/Themes/Oqtane.Themes.OqtaneTheme/Theme.css b/Oqtane.Application/Server/wwwroot/Themes/Oqtane.Themes.OqtaneTheme/Theme.css
new file mode 100644
index 00000000..c40b7140
--- /dev/null
+++ b/Oqtane.Application/Server/wwwroot/Themes/Oqtane.Themes.OqtaneTheme/Theme.css
@@ -0,0 +1,178 @@
+/* Oqtane Styles */
+
+body {
+ padding-top: 7rem;
+}
+
+/* App Logo */
+.app-logo .img-fluid {
+ max-height: 90px;
+ padding: 0 5px 0 5px;
+}
+
+.table > :not(caption) > * > * {
+ box-shadow: none;
+}
+
+.table .form-control {
+ background-color: #ffffff !important;
+ border-width: 0.5px !important;
+ border-bottom-color: #ccc !important;
+ color: #000 !important;
+}
+
+.table .form-select {
+ background-color: #ffffff !important;
+ border-width: 0.5px !important;
+ border-bottom-color: #ccc !important;
+ color: #000 !important;
+}
+
+.table .btn-primary {
+ background-color: var(--bs-primary);
+}
+
+.table .btn-secondary {
+ background-color: var(--bs-secondary);
+}
+
+.alert-dismissible .btn-close {
+ z-index: 1;
+}
+
+.controls {
+ z-index: 2000;
+ padding-top: 15px;
+ padding-bottom: 15px;
+ margin-right: 10px;
+}
+
+.app-menu .nav-item {
+ font-size: 0.9rem;
+ padding-bottom: 0.5rem;
+ white-space: nowrap;
+}
+
+.app-menu .nav-item a {
+ border-radius: 4px;
+ height: 3rem;
+ display: flex;
+ align-items: center;
+ line-height: 3rem;
+ padding-left: 1rem;
+}
+
+.app-menu .nav-item a.active {
+ background-color: rgba(255,255,255,0.25);
+ color: white;
+}
+
+.app-menu .nav-item a:hover {
+ background-color: rgba(255,255,255,0.1);
+ color: white;
+}
+
+.app-menu .nav-link .oi {
+ width: 1.5rem;
+ font-size: 1.1rem;
+ vertical-align: text-top;
+ top: -2px;
+}
+
+.app-search input{
+ width: auto;
+}
+
+.navbar-toggler {
+ background-color: rgba(255, 255, 255, 0.1);
+ margin: .5rem;
+}
+
+div.app-moduleactions a.dropdown-toggle, div.app-moduleactions div.dropdown-menu {
+ color:#ffffff;
+}
+
+.footer {
+ padding-top: 15px;
+ min-height: 40px;
+ text-align: center;
+ color: #ffffff;
+ z-index: 1000;
+}
+@media (max-width: 991.98px) {
+ .app-search {
+ border-radius: 6px;
+ }
+ .app-search input{
+ display: none !important;
+ }
+
+ .app-search input + button {
+ position: initial;
+ padding-top: 7px;
+ padding-bottom: 7px;
+ }
+
+ .app-search:active, .app-search:hover {
+ display: block;
+ position: fixed;
+ top: 0;
+ min-height: 96px;
+ width: 100%;
+ left: 0;
+ z-index: 999;
+ border-radius: 0;
+ }
+
+ .app-search:active .app-form-inline, .app-search:hover .app-form-inline {
+ margin: 10px auto;
+ position: relative;
+ display: block;
+ max-width: 80%;
+ }
+
+ .app-search:active .app-form-inline input, .app-search:hover .app-form-inline input {
+ width: 100%;
+ display: block !important;
+ }
+ .app-search:active .app-form-inline input + button, .app-search:hover .app-form-inline input + button {
+ position: absolute;
+ color: rgb(42, 159, 214);
+ padding-top: 6px;
+ padding-bottom: 6px;
+ }
+}
+@media (max-width: 767.98px) {
+
+ .app-menu {
+ width: 100%;
+ }
+
+ .navbar {
+ position: fixed;
+ top: 60px;
+ width: 100%;
+ }
+
+ .controls {
+ height: 60px;
+ top: 15px;
+ position: fixed;
+ top: 0px;
+ width: 100%;
+ background-color: rgb(0, 0, 0);
+ }
+
+ .controls-group {
+ float: right;
+ margin-right: 25px;
+ }
+
+ .content {
+ position: relative;
+ top: 60px;
+ }
+ .app-search:active, .app-search:hover{
+ min-height: 60px;
+ }
+}
diff --git a/Oqtane.Application/Server/wwwroot/app_offline.bak b/Oqtane.Application/Server/wwwroot/app_offline.bak
new file mode 100644
index 00000000..4fcd2b88
--- /dev/null
+++ b/Oqtane.Application/Server/wwwroot/app_offline.bak
@@ -0,0 +1,34 @@
+
+
+
+
+
+ Upgrade Framework
+
+
+
+
+
+
+
+
Please Wait... Upgrade In Progress...
+
(this process can take a few minutes... please be patient)
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Oqtane.Application/Server/wwwroot/css/app.css b/Oqtane.Application/Server/wwwroot/css/app.css
new file mode 100644
index 00000000..46e749f7
--- /dev/null
+++ b/Oqtane.Application/Server/wwwroot/css/app.css
@@ -0,0 +1,288 @@
+@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
+
+html, body {
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+app {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+}
+
+/* Admin Modal */
+.app-admin-modal .modal {
+ position: fixed; /* Stay in place */
+ z-index: 9999; /* Sit on top */
+ left: 0;
+ top: 0;
+ display: block;
+ width: 100%; /* Full width */
+ height: 100%; /* Full height */
+ overflow: auto; /* Enable scroll if needed */
+ background: rgba(0,0,0,0.3); /* Dim background */
+}
+
+ .app-admin-modal .modal-dialog {
+ width: 100%; /* Full width */
+ height: 100%; /* Full height */
+ max-width: none; /* Override default of 500px */
+ }
+
+ .app-admin-modal .modal-content {
+ margin: 5% auto; /* 5% from the top and centered */
+ width: 80%; /* Could be more or less, depending on screen size */
+ }
+
+/* Action Dialog */
+.app-actiondialog{
+ position: absolute;
+}
+.app-actiondialog .modal {
+ position: fixed; /* Stay in place */
+ z-index: 9999; /* Sit on top */
+ left: 0;
+ top: 0;
+ display: block;
+ width: 100%; /* Full width */
+ height: 100%; /* Full height */
+ overflow: auto; /* Enable scroll if needed */
+ background: rgba(0,0,0,0.3); /* Dim background */
+}
+
+.app-actiondialog .modal-dialog {
+ width: 100%; /* Full width */
+ height: 100%; /* Full height */
+ max-width: none; /* Override default of 500px */
+}
+
+.app-actiondialog .modal-content {
+ margin: 15% auto; /* 15% from the top and centered */
+ width: 40%; /* Could be more or less, depending on screen size */
+}
+
+/* Admin Pane */
+.app-pane-admin-border {
+ width: 100%;
+ border-width: 1px;
+ border-style: dashed;
+ border-color: gray;
+}
+
+.app-pane-admin-title {
+ width: 100%;
+ text-align: center;
+ color: gray;
+}
+
+.app-moduleactions .dropdown-menu {
+ z-index: 9999;
+}
+
+.app-moduleactions .dropdown-submenu {
+ position: relative;
+}
+
+ .app-moduleactions .dropdown-submenu > .dropdown-menu {
+ top: 0;
+ left: 100%;
+ margin-top: 0px;
+ margin-left: 0px;
+ }
+
+.app-progress-indicator {
+ background: rgba(0,0,0,0.2) url('../loading.gif') no-repeat 50% 50%;
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 9999; /* Sit on top */
+}
+
+.app-rule {
+ width: 100%;
+ color: gray;
+ height: 1px;
+ background-color: gray;
+ margin: 0.5rem;
+}
+
+.app-link-unstyled, .app-link-unstyled:visited, .app-link-unstyled:hover, .app-link-unstyled:active, .app-link-unstyled:focus, .app-link-unstyled:active:hover {
+ font-style: inherit;
+ color: inherit;
+ background-color: transparent;
+ font-size: inherit;
+ text-decoration: none;
+ font-variant: inherit;
+ font-weight: inherit;
+ line-height: inherit;
+ font-family: inherit;
+ border-radius: inherit;
+ border: inherit;
+ outline: inherit;
+ box-shadow: inherit;
+ padding: inherit;
+ vertical-align: inherit;
+}
+
+.app-alert {
+ padding: 20px;
+ background-color: #f44336; /* red */
+ color: white;
+ margin-bottom: 15px;
+}
+
+.app-moduletitle a {
+ scroll-margin-top: 7rem;
+}
+
+/* Tooltips */
+.app-tooltip {
+ cursor: help;
+ position: relative;
+}
+
+ .app-tooltip::before,
+ .app-tooltip::after {
+ left: 25%;
+ opacity: 0;
+ position: absolute;
+ z-index: -100;
+ }
+
+ .app-tooltip:hover::before,
+ .app-tooltip:focus::before,
+ .app-tooltip:hover::after,
+ .app-tooltip:focus::after {
+ opacity: 1;
+ transform: scale(1) translateY(0);
+ z-index: 100;
+ }
+
+ .app-tooltip::before {
+ border-style: solid;
+ border-width: 1em 0.75em 0 0.75em;
+ border-color: #3E474F transparent transparent transparent;
+ bottom: 100%;
+ content: "";
+ margin-left: -0.5em;
+ transition: all .65s cubic-bezier(.84,-0.18,.31,1.26), opacity .65s .5s;
+ transform: scale(.6) translateY(-90%);
+ }
+
+ .app-tooltip:hover::before,
+ .app-tooltip:focus::before {
+ transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
+ }
+
+ .app-tooltip::after {
+ background: #3E474F;
+ border-radius: .25em;
+ bottom: 140%;
+ color: #EDEFF0;
+ content: attr(data-tip);
+ margin-left: -8.75em;
+ padding: 1em;
+ transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
+ transform: scale(.6) translateY(50%);
+ width: 17.5em;
+ }
+
+ .app-tooltip:hover::after,
+ .app-tooltip:focus::after {
+ transition: all .65s cubic-bezier(.84,-0.18,.31,1.26);
+ }
+
+@media (max-width: 760px) {
+ .app-tooltip::after {
+ font-size: .75em;
+ margin-left: -5em;
+ width: 10em;
+ }
+}
+
+#blazor-error-ui {
+ background: lightyellow;
+ bottom: 0;
+ box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
+ display: none;
+ left: 0;
+ padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+ position: fixed;
+ width: 100%;
+ z-index: 1000;
+}
+
+#blazor-error-ui .dismiss {
+ cursor: pointer;
+ position: absolute;
+ right: 0.75rem;
+ top: 0.5rem;
+}
+
+/* Oqtane Control Styles */
+
+/* Pager */
+.app-pager-pointer {
+ cursor: pointer;
+}
+
+.app-sort-th {
+ cursor: pointer;
+}
+
+.app-fas {
+ margin-left: 5px;
+}
+
+.app-form-inline {
+ display: inline;
+}
+
+.app-search {
+ display: inline-block;
+ position: relative;
+}
+.app-search input + button {
+ background: none;
+ border: none;
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+.app-search input + button .oi {
+ top: 0;
+}
+.app-search-noinput {
+ display: inline-block;
+ position: relative;
+}
+.app-search-noinput button {
+ background: none;
+ border: none;
+ color: var(--bs-heading-color);
+}
+.app-search-noinput button:hover {
+ color: var(--bs-heading-color);
+}
+
+/* Text Editor */
+.text-area-editor > textarea {
+ width: 100%;
+ min-height: 250px;
+}
+
+.app-logo .navbar-brand {
+ padding: 5px 20px 5px 20px;
+}
+
+/* cookie consent */
+.gdpr-consent-bar .btn-show {
+ bottom: -3px;
+ left: 5px;
+}
+.gdpr-consent-bar .btn-hide {
+ top: 0;
+ right: 5px;
+}
diff --git a/Oqtane.Application/Server/wwwroot/css/open-iconic/README.md b/Oqtane.Application/Server/wwwroot/css/open-iconic/README.md
new file mode 100644
index 00000000..6b810e47
--- /dev/null
+++ b/Oqtane.Application/Server/wwwroot/css/open-iconic/README.md
@@ -0,0 +1,114 @@
+[Open Iconic v1.1.1](http://useiconic.com/open)
+===========
+
+### Open Iconic is the open source sibling of [Iconic](http://useiconic.com). It is a hyper-legible collection of 223 icons with a tiny footprint—ready to use with Bootstrap and Foundation. [View the collection](http://useiconic.com/open#icons)
+
+
+
+## What's in Open Iconic?
+
+* 223 icons designed to be legible down to 8 pixels
+* Super-light SVG files - 61.8 for the entire set
+* SVG sprite—the modern replacement for icon fonts
+* Webfont (EOT, OTF, SVG, TTF, WOFF), PNG and WebP formats
+* Webfont stylesheets (including versions for Bootstrap and Foundation) in CSS, LESS, SCSS and Stylus formats
+* PNG and WebP raster images in 8px, 16px, 24px, 32px, 48px and 64px.
+
+
+## Getting Started
+
+#### For code samples and everything else you need to get started with Open Iconic, check out our [Icons](http://useiconic.com/open#icons) and [Reference](http://useiconic.com/open#reference) sections.
+
+### General Usage
+
+#### Using Open Iconic's SVGs
+
+We like SVGs and we think they're the way to display icons on the web. Since Open Iconic are just basic SVGs, we suggest you display them like you would any other image (don't forget the `alt` attribute).
+
+```
+
+```
+
+#### Using Open Iconic's SVG Sprite
+
+Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack.
+
+Adding an icon from an SVG sprite is a little different than what you're used to, but it's still a piece of cake. *Tip: To make your icons easily style able, we suggest adding a general class to the* `