SVG for icons without coding
You can get SVG for icons without writing any code.
There are 2 options:
- You can download SVG from Iconify website (very easy).
- You can use Iconify API to generate SVG (might be too complicated or inefficient).
If you would rather generate SVG programmatically, consider using Iconify Utils.
Websites
You can browse all available icons and copy code or SVG on the following websites:
- Iconify icon sets - official website.
- Icones - alternative website created by Anthony Fu.
Find icon you want, select it, copy SVG to clipboard, paste it in your HTML.
API
If you know the name of the icon you want to use, you can download SVG from Iconify API.
Iconify API is an open source hosted (or self-hosted) service for developers. Public Iconify API servers host over 200,000 icons from more than 150 open source icon sets.
You can get icons from public API by visiting URLs like this: https://api.iconify.design/mdi-light/home.svg.
Replace with icon set prefix, with icon name.
Optional parameters:
- ?height=none - removes width and height.
- ?height=auto - sets width and height to same as viewBox.
- ?color=black - changes currentColor to color, usable only for monotone icons. If color contains "#", replace it with "%23" (see URL encoding).
- ?box=1 - adds empty rectangle that match viewBox. When importing SVG to some software, such as Sketch, it is needed to maintain icon dimensions after import.
- ?download=1 - forces browser to download file.
Example: https://api.iconify.design/ri/account-box-line.svg?height=none&color=%23000&box=1
Process:
- Get SVG from API.
- Download and save it.
- Copy it to clipboard, paste in your HTML.
See Iconify API documentation for details and more parameters.