Google Material Icons

Default Icons

All icons shown here are provided by Google Material Icons, an open-source library designed to support the principles of Material Design with clean, modern visuals.

The .pt-icon-container class aligns each icon within its area, while .pt-icon provides uniform spacing and sizing so all icons appear consistent.

Bold Icons

Use the .pt-font-weight-600 class to add a bold weight to your icons, giving them a stronger visual emphasis.

Border Icons

Combine .pt-brd-(color), .pt-brd-(border style), and .pt-brd-width-(border width) to create custom borders that frame each icon with your chosen style, color, and width.

Background Icons

Use .pt-color-white with .pt-bg-(color) to highlight icons by adding a solid background color, ensuring strong contrast with the white icon.

Background & Border Icons

Combine border classes with background styling for a layered effect. .pt-brd-(color) defines the border, while .pt-color-white and .pt-bg-(color) create the background. Use .pt-ma-(margin) to separate the border from the background for added depth.

Rounded Border Icons

Apply .pt-round or .pt-round-(roundness) to soften the edges of icon borders, creating a smoother, rounded look.

Rounded Background Icons

Use .pt-round or .pt-round-(roundness) to round background edges, giving icons a softer, modern appearance.

Rounded Background & Border Icons

Apply .pt-round or .pt-round-(roundness) to round the edges of both the border and the background, unifying the shape for a clean, balanced style.

Gradient Icons

Apply .pt-color-gradient-(gradient number) to fill icons with gradient colors, adding a vibrant and dynamic visual effect.

Gradient Border Icons

Combine gradient and border classes for a multi-layered effect. .pt-color-gradient-(gradient number) colors the icon, while .pt-icon-outline-gradient-(gradient number) applies the gradient to the border, enhanced with your chosen style and width.

Gradient Background Icons

Pair .pt-color-white with .pt-bg-gradient-(gradient number) to place icons against gradient backgrounds, creating contrast and depth.

Gradient Background & Border Icons

For maximum impact, layer gradients across both background and borders. .pt-icon-outline-gradient-(gradient number) styles the border, while .pt-bg-gradient-(gradient number) sets the background. Combine with .pt-color-white and spacing from .pt-ma-(margin) for a striking, polished look.