---
description: How to customize styles?
---

# Customization

## Change Styles

Let's start with how to change Yoda color styles.

You can find our variables can be found `src/assets/less/_variables`

User variables can be found in `src/assets/less/_user-variables`. Uncomment Yoda variable on file and change it with yours.

## Customize Ant Design Components

Yoda Admin Template created based on [Ant Design Components](https://ant.design/components/overview/).&#x20;

Ant Design using less as the development language for styling. Components can customize with override [Ant Design Variables.](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less)&#x20;

Ant Design variables can be found in `src/assets/less/variables/_ant-variables`

```css
@import "../../../../node_modules/antd/lib/style/themes/default.less";

@primary-color: @primary-1;
@info-color: @info-1;
@text-color: @b-100;
```

## Icon Customization

We used two different Icon set on Yoda Admin Template

1. [Remix Icon](https://react-icons.github.io/react-icons/icons?name=ri)&#x20;
2. [Iconly](https://react-iconly.jrgarciadev.com/)

Ant Design has special variable for icon font-prefix. If you want to use special icon make sure you add `.remix-icon` class to your icons. Or you can change your own prefix and use it for your icons.

```jsx
Ant Icon-font Css Prefix
@iconfont-css-prefix: remix-icon;

Icon Usage on Button component


 <Button
  className="da-mr-16 da-mb-16"
  type="primary"
  shape="circle"
  icon={<RiSearchLine className="remix-icon" />}
/>
```

