---
title: Custom Icons / Font Awesome
description: Replace Jodit toolbar icons with custom SVG or Font Awesome icons.
keywords: custom icons, font awesome, toolbar icons
---
# Custom icons / Use Font awesome
Jodit provides several ways to replace toolbar icons.
You can replace one icon or all icons at once.
## Customize one icon
You can replace the icon for a specific button:
```javascript
Jodit.make('#editor', {
controls: {
bold: {
iconURL: 'https://xdsoft.net/favicon.png'
}
}
});
```
Or through the module [Icon](https://xdsoft.net/jodit/docs/modules/icons.html)
```javascript
Jodit.modules.Icon.set(
'brush',
``
);
Jodit.make('#editor');
```
### Result
```html
```
## Replace all icons
Or replace all icons in Jodit.
For example, let's connect Jodit with Font Awesome icons
Include Jodit and and the CDN Font Awesome
```html
```
Create input element
```html
```
And define method `getIcon`:
```javascript
Jodit.make('#editor', {
getIcon: function (name, clearName) {
let code = name;
// not all font awesome icons is matched to Jodit icons
switch (clearName) {
case 'redo':
code = 'rotate-right';
break;
}
return (
''
);
}
});
```
For full replacing you can copy this code:
```javascript
Jodit.make('#editor', {
getIcon: function (name, clearName) {
let code = clearName;
switch (clearName) {
case 'redo':
code = 'rotate-right';
break;
case 'video':
code = 'video-camera';
break;
case 'copyformat':
code = 'clone';
break;
case 'about':
code = 'question';
break;
case 'selectall':
code = 'legal';
break;
case 'symbol':
return 'Ω';
case 'hr':
code = 'minus';
break;
case 'left':
case 'right':
case 'justify':
case 'center':
code = 'align-' + name;
break;
case 'brush':
code = 'tint';
break;
case 'fontsize':
code = 'text-height';
break;
case 'ul':
case 'ol':
code = 'list-' + name;
break;
case 'source':
code = 'code';
break;
}
return (
''
);
}
});
```
### Result
```html
```