Icon Matrix Home

Common ways to use this component include:

 Icon Quick Links: Pair icons with short titles to create intuitive navigation hubs for frequently accessed resources like portals, menus, and calendars.

 Animated Stats & Impact Numbers: Highlight key district statistics, graduation rates, or achievements with numbers that dynamically count up upon page load.

 School & Staff Directories: Swap standard icons for custom photos or avatars to showcase leadership team members, department leads, or campus profiles.

 Core Values & Mission Statements: Display district pillars and core values using icons paired with descriptive body text to build brand identity and trust.

Each record in Icon Matrix can be linked to a standard URL—whether it’s an internal or external page—or to a lightbox popup for additional information. The lightbox feature is perfect for maintaining a clean, minimal design while offering users more context without requiring them to navigate away from the page. Whether you're showcasing people, schools, programs, or core values, the lightbox is an invaluable tool for enhancing organization and user experience.

Looking to pair eye-catching icons with other content, like a welcome message, video, social feed, or photo? Icon Matrix makes it easy. With four component body layout options, you can position icons on either the left or right side of the page and customize the width of content columns for a balanced design. The component body functions as a WYSIWYG editor, giving you endless possibilities to create and arrange the content alongside your icons. Use this feature to design the perfect layout tailored to your needs!

With Icon Matrix, you have full control over the number of icons displayed per row on desktop. For longer icon titles or larger font sizes, simply reduce the number of icons per row for a clean and balanced look. If your goal is to fit more content above the fold or keep all icons on a single line, opt for smaller font sizes and increase the number of icons per row. Whatever your content requirements, Icon Matrix empowers you to create a visually appealing and user-friendly layout that suits your needs perfectly.

When using the Custom Color option, Icon Matrix allows you to enhance your content with customizable background options, including colors and images. Use background images to add subtle textures, watermarks, or striking full-size photos. With the background color fields, you can apply solid hues or eye-catching gradients. Adding a background color or image will make your Icon Matrix component stand out, capturing attention and elevating the visual appeal of your page.

Already part of the ParentSquare community? Simply sign in to browse our complete collection of user guides, quick-start tips, and practical walk-throughs.

Visit Icon Matrix Component Guide