Skip to content

Remote icons

Only local icons are dumped. To use an Iconify icon from JavaScript, download it into your icon directory with one of the symfony/ux-icons commands. After both, the bundle dumps the icons again and prints the export name of each new one.

Terminal window
$ php bin/console ux:icons:import fa7-brands:x-twitter
✓ Imported fa7-brands:x-twitter
JavaScript: import { Fa7BrandsXTwitterIcon }
// Dumped 43 icon(s) for JavaScript.

The dump also runs when one of the icons is not found: the other ones are imported anyway.

ux:icons:lock downloads the remote icons your application uses. With the bundle, it also looks for them in your JavaScript, so you can write the import first:

assets/controllers/delete_controller.js
import { LucideTrash2Icon } from '../../var/icons/index.js'
Terminal window
$ php bin/console ux:icons:lock
✓ Imported lucide:trash-2 (License: ISC). Render with: {{ ux_icon('lucide:trash-2') }}
JavaScript: import { LucideTrash2Icon }
// Dumped 44 icon(s) for JavaScript.

The bundle scans the .js, .mjs, .jsx, .ts, .mts, .tsx, .vue and .svelte files of scan_directories (assets/ by default, node_modules/ and vendor/ excluded) for named imports from a module whose path contains icons. Aliased imports (LucideXIcon as Close) are found too, type imports are not.

An export name can come from several icon names (LucideTrash2Icon is lucide:trash-2 or lucide:trash2): every candidate is given to ux:icons:lock, which skips the ones Iconify does not know.