Icons
Comprehensive icon library for the MSQ Design System. 1425 icons organised by Figma frame. Browse, search, and download SVG where available.
Icon set in Figma
Icons are maintained as a component set in Figma. Designers use Figma as the source of truth; this page shows the same set for development.
Open icon set in FigmaNote: Icons use currentColor for fill, allowing them to inherit the text color from their parent element.
Browse Icons
.svg)
%2C%20Style%3DBrand%2C%20State%3DDefault.svg)
%2C%20Style%3DGray%2C%20State%3DDefault.svg)
%2C%20Style%3DGray%2C%20State%3DHover.svg)
Usage
Icons can be used as React components (when in the registry) or viewed in Figma.
As React Components
import { getIconByName } from "@/components/icons"
const iconData = getIconByName("activity")
if (iconData) {
const Icon = iconData.component
return <Icon className="h-6 w-6 text-[var(--color-primary)]" />
}Figma-only icons
Icons not yet in the registry can be shown via FigmaIcon (fetches from Figma) or opened in Figma using the link on each card.
Styling
Icons use currentColor for fill so they inherit the text color from their parent.
<div className="text-[var(--color-primary)]">
<Icon className="h-6 w-6" />
</div>