Skip to content
Compass Docs

SVG Icons

This is the guide on how to add icons to tabs, or to cards.

You can either use:

  • Material Design Icons
  • Material Symbols (cards only)
  • Material Symbols Light (tabs only)
  • Google Material Icons
  • Material Design Icons

  1. To find and filter SVG icons, use this link: Iconify - Material Filter

  2. Once you have found the icon you would like, click on it and press Copy to Clipboard.

  3. Next, go to my SVG Path Extractor, and paste the contents into it here.

  4. Then, press Enter, or click Extract Path, and the new path will be copied to your clipboard. This, you can use as the {svg} prop when making cards or tabs.