diff --git a/README.md b/README.md
index da262de..34f4538 100644
--- a/README.md
+++ b/README.md
@@ -70,9 +70,10 @@ Directory `iconify-icon` contains `iconify-icon` web component and wrappers for
Frameworks that are confirmed to work with web components without custom wrappers:
- Svelte.
+- Lit.
+- Ember.
- Vue 2 and Vue 3, but requires custom config when used in Nuxt (see below).
- React, but with small differences, such as using `class` instead of `className`. Wrapper fixes it and provides types.
-- Ember.
#### Demo
@@ -87,6 +88,7 @@ Directory `iconify-icon-demo` contains demo packages that show usage of `iconify
- [Nuxt 3 demo](./iconify-icon-demo/nuxt3-demo/) - demo for web component with Nuxt 3. Run `npm run dev` to start demo. Requires custom config, see below.
- [Vue 2 demo](./iconify-icon-demo/vue2-demo/) - demo for web component with Vue 2. Run `npm run build` to build demo and `npm run serve` to start it.
- [SolidJS demo](./iconify-icon-demo/solid-demo/) - demo using web component with SolidJS. Run `npm run dev` to start demo.
+- [Lit demo](./iconify-icon-demo/lit-demo/) - demo for web component with Lit. Run `npm run start` to start demo.
#### Nuxt 3 usage
diff --git a/iconify-icon-demo/lit-demo/.editorconfig b/iconify-icon-demo/lit-demo/.editorconfig
new file mode 100644
index 0000000..c8c2d2a
--- /dev/null
+++ b/iconify-icon-demo/lit-demo/.editorconfig
@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */
diff --git a/iconify-icon-demo/lit-demo/.gitignore b/iconify-icon-demo/lit-demo/.gitignore
new file mode 100644
index 0000000..5c4d921
--- /dev/null
+++ b/iconify-icon-demo/lit-demo/.gitignore
@@ -0,0 +1,24 @@
+## editors
+/.idea
+/.vscode
+
+## system files
+.DS_Store
+
+## npm
+/node_modules/
+/npm-debug.log
+
+## testing
+/coverage/
+
+## temp folders
+/.tmp/
+
+# build
+/_site/
+/dist/
+/out-tsc/
+
+storybook-static
+custom-elements.json
diff --git a/iconify-icon-demo/lit-demo/LICENSE b/iconify-icon-demo/lit-demo/LICENSE
new file mode 100644
index 0000000..e37921d
--- /dev/null
+++ b/iconify-icon-demo/lit-demo/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 lit-demo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/iconify-icon-demo/lit-demo/README.md b/iconify-icon-demo/lit-demo/README.md
new file mode 100644
index 0000000..df8ad47
--- /dev/null
+++ b/iconify-icon-demo/lit-demo/README.md
@@ -0,0 +1,30 @@
+
+
+
+## Open-wc Starter App
+
+[](https://github.com/open-wc)
+
+## Quickstart
+
+To get started:
+
+```sh
+npm init @open-wc
+# requires node 10 & npm 6 or higher
+```
+
+## Scripts
+
+- `start` runs your app for development, reloading on file changes
+- `start:build` runs your app after it has been built using the build command
+- `build` builds your app and outputs it in your `dist` directory
+- `test` runs your test suite with Web Test Runner
+- `lint` runs the linter for your project
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
\ No newline at end of file
diff --git a/iconify-icon-demo/lit-demo/assets/open-wc-logo.svg b/iconify-icon-demo/lit-demo/assets/open-wc-logo.svg
new file mode 100644
index 0000000..c3ec9a5
--- /dev/null
+++ b/iconify-icon-demo/lit-demo/assets/open-wc-logo.svg
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
diff --git a/iconify-icon-demo/lit-demo/index.html b/iconify-icon-demo/lit-demo/index.html
new file mode 100644
index 0000000..50246fd
--- /dev/null
+++ b/iconify-icon-demo/lit-demo/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+ lit-demo
+
+
+
+
+ Usage (full module)
+
+ Icons referenced by name (as SVG, as SPAN):
+
+
+
+
+
+
+ Usage (offline mode: using preloaded icons)
+
+ Icons referenced by name (as SVG, as SPAN):
+
+
+ Icons referenced by stringified object (as SVG, as SPAN):
+
+
+ 2 icons imported from icon set:
+
+
+
+
+
+
+ Inline demo
+
+ Block icon (behaving like image):
+
+
+ Inline icon (behaving line text / icon font):
+
+
+ `;
+ }
+}
diff --git a/iconify-icon-demo/lit-demo/src/lit-demo.ts b/iconify-icon-demo/lit-demo/src/lit-demo.ts
new file mode 100644
index 0000000..f176fda
--- /dev/null
+++ b/iconify-icon-demo/lit-demo/src/lit-demo.ts
@@ -0,0 +1,4 @@
+import 'iconify-icon';
+import { LitDemo } from './LitDemo.js';
+
+customElements.define('lit-demo', LitDemo);
diff --git a/iconify-icon-demo/lit-demo/tsconfig.json b/iconify-icon-demo/lit-demo/tsconfig.json
new file mode 100644
index 0000000..a97d82e
--- /dev/null
+++ b/iconify-icon-demo/lit-demo/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "target": "es2018",
+ "module": "esnext",
+ "moduleResolution": "node",
+ "noEmitOnError": true,
+ "lib": ["es2017", "dom"],
+ "strict": true,
+ "esModuleInterop": false,
+ "allowSyntheticDefaultImports": true,
+ "experimentalDecorators": true,
+ "importHelpers": true,
+ "outDir": "out-tsc",
+ "sourceMap": true,
+ "inlineSources": true,
+ "rootDir": "./",
+ "incremental": true
+ },
+ "include": ["**/*.ts"]
+}
diff --git a/iconify-icon-demo/lit-demo/web-dev-server.config.mjs b/iconify-icon-demo/lit-demo/web-dev-server.config.mjs
new file mode 100644
index 0000000..8d82ff5
--- /dev/null
+++ b/iconify-icon-demo/lit-demo/web-dev-server.config.mjs
@@ -0,0 +1,26 @@
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+ open: '/',
+ watch: !hmr,
+ /** Resolve bare module imports */
+ nodeResolve: {
+ exportConditions: ['browser', 'development'],
+ },
+
+ /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+ // esbuildTarget: 'auto'
+
+ /** Set appIndex to enable SPA routing */
+ // appIndex: 'demo/index.html',
+
+ plugins: [
+ /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+ // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+ ],
+
+ // See documentation for all available options
+});
diff --git a/iconify-icon-demo/react-demo/src/App.tsx b/iconify-icon-demo/react-demo/src/App.tsx
index c8b10aa..0ffb431 100644
--- a/iconify-icon-demo/react-demo/src/App.tsx
+++ b/iconify-icon-demo/react-demo/src/App.tsx
@@ -18,7 +18,7 @@ addIcon('demo', chartIcon);
addIcon('experiment2', {
width: 16,
height: 16,
- body: ' 
+