File Tree Icons

These icons are used by the file tree component to represent different file types and tools.

Overview

The Icon component renders SVG icons from a built-in icon set. Icons are used throughout the framework in headers, social links, navigation, and content notices.

Props

Prop	Type	Description
name	string	Icon identifier from the built-in set
label	string	Accessible label (renders as aria-label)
color	string	CSS color value
size	string	CSS size value (width and height)

Navigation Icons

These icons are used in navigation and directional UI:

	Icon Name	Usage
	up-caret	Collapsible sections
	down-caret	Dropdown menus
	right-caret	Sidebar expand
	left-caret	Back navigation
	up-arrow	Scroll to top
	down-arrow	Scroll down indicator
	right-arrow	Forward, next page
	left-arrow	Back, previous page

Action Icons

	Icon Name	Usage
	pencil	Edit actions
	pen	Edit page link
	document	File/page reference
	add-document	Create new page
	setting	Settings/configuration
	external	External links
	download	Download actions
	cloud-download	Cloud download
	copy	Copy to clipboard
	translate	Language/i18n

UI Icons

	Icon Name	Usage
	bars	Hamburger menu
	close	Close/dismiss
	magnifier	Search
	forward-slash	Search shortcut hint

Theme Icons

	Icon Name	Usage
	moon	Dark theme
	sun	Light theme
	laptop	Auto/system theme

Status Icons

	Icon Name	Usage
	information	Info notices
	warning	Warning notices
	error	Error/danger notices
	approve-check	Success/check
	approve-check-circle	Success (circled)
	question	Help/unknown
	question-circle	Help (circled)

Content Icons

	Icon Name	Usage
	rocket	Getting started
	star	Featured/favorites
	puzzle	Plugins/extensions
	open-book	Documentation
	notes	Notes/guides
	code-branch	Git/version control
	list-format	Lists/formatting
	comment	Comments
	comment-alt	Alternative comments
	heart	Favorites/likes

Device Icons

	Icon Name	Usage
	clock	Time/scheduling
	desktop	Desktop view
	mobile-android	Mobile view
	window	Window/browser
	database	Data storage
	server	Server/hosting
	padlock	Security/auth

Social & Brand Icons

	Icon Name	Usage
	github	GitHub
	gitlab	GitLab
	bitbucket	Bitbucket
	discord	Discord
	twitter	Twitter
	x.com	X (formerly Twitter)
	mastodon	Mastodon
	youtube	YouTube
	linkedin	LinkedIn
	twitch	Twitch
	instagram	Instagram
	facebook	Facebook
	reddit	Reddit
	telegram	Telegram
	slack	Slack
	codePen	CodePen
	codeberg	Codeberg
	threads	Threads
	blueSky	Bluesky
	stackOverflow	Stack Overflow
	rss	RSS feed
	email	Email
	phone	Phone
	signal	Signal
	matrix	Matrix
	patreon	Patreon
	farcaster	Farcaster
	gitter	Gitter
	azureDevOps	Azure DevOps
	microsoftTeams	Microsoft Teams
	openCollective	Open Collective
	hackerOne	HackerOne
	discourse	Discourse
	zulip	Zulip
	pinterest	Pinterest
	tiktok	TikTok
	googlePlayColor	Google Play
	googlePlay	Google Play (monochrome)

Technology Icons

	Icon Name	Usage
	astro	Astro framework
	solidjs	SolidJS
	alpine	Alpine.js
	pnpm	pnpm package manager
	biome	Biome toolchain
	mdx	MDX format
	apple	Apple/macOS
	linux	Linux
	homebrew	Homebrew
	nix	Nix
	starlight	Starlight

Usage in Config

Icons are referenced by name in qwik-docs.config.ts for social links:

social: [
  { icon: 'github', label: 'GitHub', href: 'https://github.com/...' },
  { icon: 'discord', label: 'Discord', href: 'https://discord.gg/...' },
  { icon: 'twitter', label: 'Twitter', href: 'https://twitter.com/...' },
]

Usage in Hero Actions

Icons can be added to hero action buttons:

hero:
  actions:
    - text: View Source
      link: https://github.com/...
      icon: github