# Configuration (/docs/configuration)
This page covers configuration shared by both installation modes.
## Icons configuration [#icons-configuration]
Trident UI lets you load icon groups through providers.
Install the icons package first:
```bash
npm install --save @clubmed/trident-icons
```
For the full icon catalog and usage examples, see the [`@clubmed/trident-icons` Storybook](https://latest.trident-icons.pro.clubmed/?path=/docs/atoms-icon-svguse--docs).
For AI-assisted icon integration guidance, see the [AI integration note](https://latest.trident-icons.pro.clubmed/?path=/docs/ia-integration--docs).
*Preview of Trident UI icon sets.*
Available providers:
* `SvgIconProvider`: lazy-loaded SVG rendering.
* `SvgUseIconProvider`: native `svg/use` rendering.
Available icon groups:
By default, no icon provider is set. Import and register only the subsets you need.
SVG mode:
```tsx
import Actions from '@clubmed/trident-icons/svg/Actions'
import { Icon, IconsProvider } from '@clubmed/trident-icons'
function App() {
return (
)
}
```
You can mix SVG and SVG-use modes:
```tsx
import Actions from '@clubmed/trident-icons/svg/Actions'
import Brand from '@clubmed/trident-icons/svg/Brand'
import { Icon, IconsProvider } from '@clubmed/trident-icons'
function App() {
return (
)
}
```
In this setup, `Icon` automatically uses the correct resolver.
### Register custom icons [#register-custom-icons]
You can register external SVG icons without building a custom icon component:
```tsx
import { lazy } from 'react'
import { resolver } from '@/atoms/Icons/svg/SvgIconResolver'
import { Icon, IconsProvider } from '@clubmed/trident-icons'
const CustomIcons = resolver([
{
name: 'MyCustomIcon',
group: 'custom',
element: lazy(() => import('./MyCustomIcon.svg?react')),
// viewBox: '0 0 30 30',
// aspectRatio: 1,
// orientation: 'left'
},
])
function App() {
return (
)
}
```
## Optional: twMerge helper [#optional-twmerge-helper]
If you use `tailwind-merge`, prefer the helper exported by Trident UI:
```ts
import { twMerge } from '@clubmed/trident-ui/helpers/twMerge'
```