Handling Assets

Assets are static resources that your application uses. In FSD, assets follow the same placement principles as code. Group them by use case, not by type, and keep them close to the components that use them.

Caution

It’s a common practice to implement a custom assets segment for all static files, but this pattern is generally discouraged, as it violates FSD principles of high cohesion and locality of changes.

If you are interested in a more detailed explanation, you can check articles on Desegmentation and Slices and segments.

Slice-specific Assets

When an asset is only used by one page, widget, or feature, keep it inside that slice. This maintains encapsulation and makes it clear where the asset belongs:

• Directorypages/

  • Directoryhome/

    • Directoryui/

      • hero-image.jpg
      • HomePage.tsx
    • index.ts

If your UI has many static assets like images, you can create a subfolder in the ui segment:

• Directorypages/

  • Directoryhome/

    • Directoryui/

      • Directorypreviews/

        • cake.jpg
        • pizza.jpg
        • …
      • HomePage.tsx
    • index.ts

Non-UI Assets

Sometimes an asset is not part of the UI but is a crucial part of business logic. Consider this example:

• Directoryfeatures/

  • Directorybilling/

    • Directorymodel/

      • invoice-template.pdf
      • create-invoice.ts
    • index.ts

Here, invoice-template.pdf is tightly coupled with the business logic in create-invoice.ts. In cases like this, it’s preferable to place the file in the model segment to maintain high cohesion and localize changes.

Shared Assets

If a static asset is used multiple times, you can move it to shared/ui, so it is accessible to every other part of the application.

• Directoryshared/

  • Directoryui/

    • Directoryplaceholders/

      • cake.jpg
      • pizza.jpg
      • …

The same approach can be applied for static assets that are used by shared components:

• Directoryshared/

  • Directoryui/

    • Dropdown.tsx
    • chevron.svg

Global Assets

Global assets include things like global stylesheets (such as a CSS reset) and fonts. The app layer is the right place for these files since they’re only used by the application entrypoint.

• Directoryapp/

  • Directorystyles/

    • reset.css
    • global.css
  • main.ts

Public Folder

Most bundlers and frameworks provide a public folder at the root of your project. Files here are served as-is without processing.

Some build tools like Vite allow the public folder location to be changed, while others like Astro don’t have this option. If your build tool doesn’t support this change, that’s fine. The public folder is not part of the FSD structure and won’t cause naming collisions.

Summary

Asset Type	Location
Slice-specific assets	Inside the slice (e.g., pages/home/ui/)
Reusable icons and images	shared/ui/
Global styles	app/styles/
Fonts	app/fonts/, public/ or app/public
Static files, favicon	public/ or app/public

Follow the FSD principle: place assets where they are used, and move them to shared when there’s an actual need for reuse across slices.