> This page is for Help center.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://fiftytwo-demo.ferndocs.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://fiftytwo-demo.ferndocs.com/_mcp/server.

# ViKING POS Designer resources

In [ViKING POS Designer](/help/pos-designer/wpud), resources are things that you bring into POS Designer in order to use them on your layouts and components. Examples: Images, icons, fonts, scripts, languages.

To get an overview of your resources, select **Resources** in the dark bar in the left side of POS Designer. The resources are grouped into resource groups, like **Images**, **Icons**, etc.

## Filter resources

Even though resources are grouped into resource groups, there can be many resources to choose from

If you know the name, or part of the name, of the resource that you're looking for, you can use **Filter resources** to quickly find the resource that you're looking for:

In this example, we've typed `js` in the **Filter resources** field to only view resources that have `js` in their name. In our case, that makes it easy for us to find JavaScript resources because they have the file extension *.js*:

![Wpud resources filter example](/_fern-files/_img/b92ed18e4119c1bb486ed151e393be3ac99b742248fd32fcec4a183853e1e3f2.webp)

When you use **Filter resources**, note that if relevant resources occur in multiple resource groups, the first relevant resource group from the top is expanded for your convenience, whereas you need to expand any other relevant resource groups (like the **Scripts** resource group in the example) yourself.

## Attach or add resources

You can attach

![Wpud i18n addfile](/_fern-files/_img/0e15785fe8472aca5ae76a57f06135cf0be154f23721ec800b2d9ec2bc91dd95.webp)

and add

![Wpud addplus 9x9](/_fern-files/_img/4279ec7c950e6cc001ce95efa7ca5b7d94579a9d35a989fcb80c60fb2e9c75eb.webp)

resources directly to resource groups.

* **Attach:** To attach a resource to a resource group, click

  ![Wpud i18n addfile](/_fern-files/_img/0e15785fe8472aca5ae76a57f06135cf0be154f23721ec800b2d9ec2bc91dd95.webp)

  (that's the paper clip icon) in the required resource group, browse to the required resource, and select it.

* **Add:** For some resources, such as layout scripts, icons, etc., you can also add new resources if you click

  ![Wpud addplus 9x9](/_fern-files/_img/4279ec7c950e6cc001ce95efa7ca5b7d94579a9d35a989fcb80c60fb2e9c75eb.webp)

  in the resource group.

  Example of adding an icon:

  1. In the **Icons** resource group, click

  ![Wpud addplus 9x9](/_fern-files/_img/4279ec7c950e6cc001ce95efa7ca5b7d94579a9d35a989fcb80c60fb2e9c75eb.webp)

  .
  2\. Specify a file name for the new icon, which must be in .svg ([Scalable Vector Graphics](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics)) format.
  3\. Make sure that **Open code editor after creation** is selected, and click **Add**.
  4\. In the editor window that opens, paste the .svg. code of the required icon from, for example, [Google Fonts icons](https://fonts.google.com/icons) into the empty field in line number 1. Example:

  ![Wpud components add svg example](/_fern-files/_img/09828412cccb6a194f7d868ceaec300702cb3d98f399857ade679b3caee99797.webp)

  5. Click **Save**, and then reload the page to close editor window. The new .svg icon now appears in the **Icons** resource group, and you can use it your designs.

Some resources can also be added through [components](/help/pos-designer/component). For example, if you add an image component to a layout, and you edit the component's properties to upload a particular image for use with that component, the image gets stored in the **Images** resource group.

## Manage resources

Expand a resource group and then click

![Wpud kebab](/_fern-files/_img/b905f94202a6f2c4a18d76ee9e76e62c90d0a93388f0b85cde9546bb908dd664.webp)

next to the required resource to view your management options for the resource in question.

Management options depend on the type of resource, but you're typically able to clone, edit, rename, delete, or download a resource. For some resources, like images and icons, you're also able to view the resource.

## Valid resource formats

### Layout scripts

Valid layout script formats:

* .js ([JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript))

### Images

Valid image formats:

* .jpg
* .png
* .svg ([Scalable Vector Graphics](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics))

### Icons

Valid icon file formats:

* .svg ([Scalable Vector Graphics](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics))

### Flags

You can use flags instead of text on [language selector](/help/pos-designer/component) components.

Valid flag image formats:

* .jpg
* .png
* .svg

### Audio

Valid audio formats:

* .mp3
* .wav
* .ogg
* .aac
* .m4a

See [Manage audio in ViKING POS Designer](/help/pos-designer/resources-audio) for more information.

### Videos

Valid video formats:

* .mp4
* External video links (for example to videos on YouTube) added via the video player component

### Fonts

Valid font formats:

* .woff ([Web Open Font Format](https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF))

### HTML

Valid formats:

* .html

### Styles

Valid style sheet formats:

* .css

### Scripts

Valid script formats:

* .js ([JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript))

### Locales - i18n (languages)

Valid language resource file formats:

* .json

See [Manage ViKING POS Designer languages](/help/pos-designer/resources-languages) for more information.

### Keyboards

Valid keyboard definition file formats:

* .json

### Validations

Valid formats for validation files, for example for initial validation of vouchers:

* .json