2022-02-01 19:26:07 +01:00
---
title: Illustrator Template Guide
---
2021-08-19 09:12:56 +02:00
# Illustrator Template Guide
This Guide explains how to properly use the Adobe Illustrator Template for Lucide.
>Attention: Even though it is unlikely the template can be outdated or not 100% correct. Please check the Icon Design Guide before you start working with the template to ensure integrity with the Lucide icon pack.
## General Workflow
2023-03-05 21:21:26 +01:00
The Illustrator template is created following guidelines from the [Icon Design Guide ](icon-design-guide.md ).
2021-08-19 09:12:56 +02:00
**Workflow:**
2023-11-24 13:08:57 +03:00
1. Download and open the [Illustrator template ](https://github.com/lucide-icons/lucide/blob/main/docs/public/templates/illustrator_template.ai ).
2021-08-19 09:12:56 +02:00
2. You can now remove the content from the example logo layer ("Draw") and start creating.
2023-03-05 21:21:26 +01:00
3. Verify that you follow the [Icon Design Guidelines ](icon-design-guide.md ).
2021-08-19 09:12:56 +02:00
2023-10-19 21:02:06 +05:45
4. Before you export the file as an SVG make sure to check that you followed the guidelines and remove all unnecessary layers (especially "Padding" and "Grid").
2021-08-19 09:12:56 +02:00
2023-11-24 13:08:57 +03:00
5. Export the file with the export menu under: `Export > Export As..` then save the file as SVG. Select the following options in the SVG Options dialog:
2021-08-19 09:12:56 +02:00
docs(version-1): Version 1 website (#4142)
* Update images
* Adjust color
* update accessebility
* Add matrix hero
* Add typescript documentation
* Add basics section to vue pages
* Add svelte docs
* Fix dynamic sidebar
* Add animation?
* Some adjustments
* Adjust animation
* Updates docs
* Add scaledown animation
* Add docs for vue types
* Fix layout accessibility page
* fix framework select
* adjust easing home animation
* Write docs for Vue
* Adjust animation home
* Adjust home hero animation
* Finish svelte docs
* Add solid pages
* remove spiral animation component
* Add group icons
* Added solid docs
* update preact docs
* Adjust examples preact docs
* Add snackplayer
* Get new editor
* Save this
* Add examples
* Adjust styling
* setup custom sandpack
* Add script
* Format files
* Make sandpack plugin work
* migrate react docs
* Fix svelte and solid examples
* Migrate to solid packages
* Add darkmode package logos
* Fix bug in selector
* migrate vue examples
* migrate advanced vue items
* migrate preact and svelte examples
* Add astro docs
* adding more docs on guide for lucide library
* Fix home animation
* Cleanup
* Added resources page, with more details and content
* Add hero badge for Version 1
* Fix vercel json
* Update missing paths
* Fix build?
* Replace lucide-vue-next
* Fix build
* Add some docs
* update markdown
* Setup angular docs
* Add basic angular docs
* Adjust code examples
* Update title and descriptions
* Update accessibility link
* Update title and description
* Add og image
* Fix alignment
* Add migration guides
* Adjust version 1 markdown file
* Add migration guide to the main list
* Minor fixes
* Update docs
* Apply feedback
* Select icons
* Add pointer events none
* Fix package links homepage
* Format code
* Fix types
* Fix focus
* Fix build
* Fix focus
* Apply feedback
* Adjust imports
* Adjust imports
* Fix search
* Apply feedback
* Fix import in font docs
* Small fixes
* docs(guide): added easter egg icon. stay tuned, guys 😉
* Add llm txt plugin
* Adjust logo top
* docs(version-1): upgraded @lucide/angular guide for v1 website (#4144)
* docs(guide/angular): rewrite some angular documentation
* docs(guide/angular): extens angular guide with combining icons & icon provider guides
* docs(guide/angular): fix angular sandbox, still needs @lucide/angular release tho
* docs(guide/angular): rework the getting started page a bit more, refactor some more prop=>input occurences
* docs(guide/angular): context provider => provideLucideConfig
* Update docs/guide/angular/migration.md
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Update docs/guide/angular/advanced/combining-icons.md
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Apply suggestions from code review
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
* docs(guide/angular): rework a11y for better flow & pacing
* docs(guide/angular): salvage original phrase, it has better flow
* docs(guide/angular): some more a11y nitpicking
* docs(guide/angular): reduce llm fatigue
* docs(guides/angular): fix app component selector
* docs(guides/angular): fix angular sandpacks
* Add sandpack angular to improve tree-shakable stack
* Update docs/guide/angular/getting-started.md
* docs(guides/angular): fix user import in combinding icons guide
* docs(guides/angular): fix nested SVG phrasing
* Update docs/guide/angular/advanced/with-lucide-lab.md
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* Update docs/guide/angular/advanced/filled-icons.md
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* docs(guides/angular): fix createLucideIcon guide
* docs(guides/angular): upgrade all relevant angular sandpack demos
---------
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
* fix(docs): add autogenerated OG images to gitignore
* fix(docs): unify the case of "Lucide" & "Lucide Lab" over all docs and readmes
* Fix build
* Add next tag to all installation guides
* Add top bar notification
* Minor fixes
* Update text
* Add todos
* Update og image
* Adjust install command
* Color top bar
* fix(docs): ignore all OG images, expect general.png
* fix(docs): fix the package list, hide @lucide/icons, downgrade angular logo, link to v0 guide, fix package title alignment
* Update docs/.vitepress/theme/components/base/LayoutTop.vue
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* Update docs/guide/react/advanced/dynamic-icon-component.md
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* Update CONTRIBUTING.md
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* Update docs/.vitepress/sidebar/resources.ts
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* Fix code example
* fix(docs): version 1 => Version 1
* feat(docs): add angular to new features in v1
* Fix next line issue
* feat(docs): fix typo (code example_s_)
* Fix deadlink
* feat(docs): fix some more typos and irky grammar
* feat(docs): fix lowercase lucide in sidebar 😅
* Update docs/guide/version-1.md
Co-authored-by: Karsa <contact@karsa.org>
---------
Co-authored-by: Karsa <contact@karsa.org>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
2026-03-20 17:04:28 +01:00

2021-08-19 09:12:56 +02:00
2023-03-05 21:21:26 +01:00
After that, double check that the [code conventions and SVG global attributes ](icon-design-guide.md#code-conventions ) are correct.
2021-08-19 09:12:56 +02:00
2022-02-01 19:26:07 +01:00
7. Minify paths with [SVGOMG ](https://jakearchibald.github.io/svgomg/ ).