docs: Update installation instructions in readme

README.md

@@ -9,55 +9,74 @@ The Zeta Design System includes foundations, components, and best practices that
 
 To view examples of all the components in the library, you can pull this repo and run the Storybook instance.
 
-You can also view the latest release at [Zeta](https://zeta-ds.web.app/) or the latest commits to main [here](https://zeta-web-main.web.app/).
+You can also view the latest release at [Zeta](https://design.zebra.com/) or the latest commits to main [here](https://zeta-web-main.web.app/).
 
 ## How to Use
 
-Zeta Web Components can be directly used in many web frameworks.
+Web Components can be directly used in many web frameworks.
 
 > ⚛️ **Note**: Using React? Zeta is not ready just yet. Whilst you wait, you can use [zds_react](https://www.npmjs.com/package/@zebra-fed/zds-react).
 
 1. Install `@zebra-fed/zeta-web`
 
    ```sh
-   # Future install instructions
    # NPM
    npm install @zebra-fed/zeta-web
    # YARN
    yarn add @zebra-fed/zeta-web
    ```
 
-2. Import the desired Zeta Web Component into your app:
+2. Import the global styles into the main app file
 
    ```js
-   /* Import the component in the JS/TS file where it is used */
+   import "@zebra-fed/zeta-web/index.css";
+   ```
+
+   or in HTML,
+
+   ```html
+   <link rel="stylesheet" href="./node_modules/@zebra-fed/zeta-web/dist/index.css" />
+   ```
+
+3. Import the desired Zeta Web Component, or the full package into your app:
+
+   ```js
+   // Individual button component
    import "@zebra-fed/zeta-web/dist/components/button/button.js";
 
-   /* Import the Global Styles into the main App file */
-   import "@zebra-fed/zeta-web/index.css";
+   // or full package
+   import "@zebra-fed/zeta-web";
    ```
 
    or in HTML,
 
    ```html
-   <link rel="stylesheet" href="./node_modules/@zebra-fed/zeta-web/dist/style.css" />
+   <!-- Individual button component -->
    <script type="module" src="./node_modules/@zebra-fed/zeta-web/dist/components/button/button.js"></script>
+
+   <!-- or full package-->
+   <script type="module" src="./node_modules/@zebra-fed/zeta-web/dist/index.js"></script>
    ```
 
-   You can also import the full package:
+   To reduce bloat, we recommend only importing the components you will actually use into your project.
+
+4. If you use any element that uses icons, you will also need to import the index.css from [@zebra-fed/zeta-icons](https://www.npmjs.com/package/@zebra-fed/zeta-icons).
+
+   > 🚧 **Note**: This is a temporary step for now. This will be automatically imported where needed in the future.
 
    ```js
-   import "@zebra-fed/zeta-web";
+   import "@zebra-fed/zeta-icons/index.css";
    ```
 
-3. If you use any element that uses icons, you will also need to import the index.css from [@zebra-fed/zeta-web](https://www.npmjs.com/package/@zebra-fed/zeta-icons)
-   This is a temporary step for now. This will be automatically imported where needed in the future.
+   or in HTML,
 
    ```html
-   <link rel="stylesheet" href="./node_modules/@zebra-fed/zeta-icons/dist/style.css" />
+   <link rel="stylesheet" href="./node_modules/@zebra-fed/zeta-icons/index.css" />
    ```
 
-4. Use the Web Component like any HTML element
+   Full list of icons can be found at [Zeta Icons](https://design.zebra.com/icons/).
+
+5. Use the Web Component like any HTML element
 
    ```html
    <zeta-button>Hello world!</zeta-button>
@@ -92,3 +111,7 @@ To improve the development experience while using the zeta web-components, the f
      }
    }
    ```
+
+## Licensing
+
+This software is licensed with the MIT license (see [LICENSE](./LICENSE) and [THIRD PARTY LICENSES](./LICENSE-3RD-PARTY)).