> Markdown version of [Importing Resources from npm Packages](https://vaadin.com/docs/v24/styling/advanced/npm-packages). Section index: [llms.txt](https://vaadin.com/docs/v24/styling/llms.txt)

# Loading Styles, Fonts & Images from npm Packages

Before you can import stylesheets and other styling-related resources like fonts and icons from npm packages, you need to add the package dependency with the `@NpmPackage` annotation. Define both the package name and version number:

Adding an npm package dependency

```java
// tag::package[]
@NpmPackage(value = "@fortawesome/fontawesome-free", version = "7.1.0")
// end::package[]
public class AppShell implements AppShellConfigurator {
}
```

Once you have added an npm package dependency, you can import resources from that package.

## <a id="styles-from-npm"></a>Importing Stylesheets from npm Packages

Use the `@CssImport` annotation to import stylesheets from an npm package. For example, to load `all.min.css` from `@fortawesome/fontawesome-free`:

Importing a stylesheet from an npm package

```java
@NpmPackage(value = "@fortawesome/fontawesome-free", version = "7.1.0")
// tag::import[]
@CssImport("@fortawesome/fontawesome-free/css/all.min.css")
// end::import[]
public class AppShell implements AppShellConfigurator {
}

@Tag("my-component")
public class MyComponent implements Component {
    public MyComponent() {
        Span userIcon = new Span();
        userIcon.addClassNames("fa-sharp", "fa-solid", "fa-user");
        userIcon.getStyle().set("font-family", "'Font Awesome 7 Free'");
        add(userIcon);
    }
}
```

## <a id="fonts-and-images-from-npm"></a>Using Static Resources from npm Packages

The `assets` field in the `@NpmPackage` annotation allows you to copy assets from npm packages into the static resource folder (i.e., the `VAADIN/static` folder), allowing you to references them from Java source code and from the browser.

The `assets` field syntax looks like this in general: `"asset/glob/pattern:local/target/path"`. The first part defines which files from the npm package should be copied, and it can be a “glob” pattern. The second part, after the colon, defines where matching resources are copied under the resources folder. You can define multiple asset mappings for a single package annotation.

Using icons from an npm package

```java
// tag::annotation[]
@NpmPackage(value = "@fortawesome/fontawesome-free", version = "7.1.0",
    assets = {
        "svgs/regular/**:fontawesome/icons"
    })
// end::annotation[]

@Tag("my-component")
public class MyComponent implements Component {
    public MyComponent() {
// tag::usage[]
        add(new Image("VAADIN/static/fontawesome/icons/snowflake.svg",
            "snowflake"));
// end::usage[]
    }
}
```

In the previous example, the `fortawesome` file `svgs/regular/snowflake.svg` is copied to `VAADIN/static/fontawesome/icons/snowflake.svg` and can be accessed with that path in the application code and CSS stylesheets.

`3e46fe3b-00d6-4cf7-908c-342a364210db`