Skip to content
CloudAlt Documentation

Icon Libraries Installation Summary

Successfully installed two professional icon libraries at workspace root level following AI directory safety protocol.

1. Heroicons (@heroicons/react)

Section titled “1. Heroicons (@heroicons/react)”
  • Version: 2.2.0
  • Size: ~4.49 MiB
  • Homepage: https://heroicons.com/
  • Description: Beautiful hand-crafted SVG icons from the makers of Tailwind CSS
  • Features:
    • 292 icons in total
    • Available in 3 sizes: 16px, 20px, 24px
    • Two variants: Solid (filled) and Outline (stroke-based)
    • React components ready to use
    • Fully accessible
    • MIT License

People Icons Available:

  • UserIcon - Single person
  • UserGroupIcon - Small group (2-3 people)
  • UsersIcon - Multiple users

Usage Example:

import { UserIcon } from '@heroicons/react/24/solid';
import { UserIcon as UserOutline } from '@heroicons/react/24/outline';


<UserIcon className="w-6 h-6 text-blue-500" />
<UserOutline className="w-6 h-6 text-pink-500" />

2. Tabler Icons (@tabler/icons-react)

Section titled “2. Tabler Icons (@tabler/icons-react)”
  • Version: 3.35.0
  • Size: ~58.19 MiB (includes all 5000+ icons)
  • Homepage: https://tabler.io/icons
  • Description: Over 5000+ pixel-perfect icons for web design
  • Features:
    • 5000+ icons
    • Customizable size, color, and stroke width
    • React components
    • Consistent 24x24 grid
    • Outline style by default
    • Some filled variants available
    • MIT License

People Icons Available (61 icons):

  • IconUser - Single person (outline)
  • IconUserFilled - Single person (filled)
  • IconMan - Male figure (outline)
  • IconManFilled - Male figure (filled)
  • IconWoman - Female figure (outline)
  • IconWomanFilled - Female figure (filled)
  • IconUsers - Two people
  • IconUsersGroup - Group of 3+ people
  • IconUserCircle, IconUserSquare, IconUserHexagon, IconUserPentagon - User in various shapes

Usage Example:

import { IconUser, IconMan, IconWoman, IconUsers } from '@tabler/icons-react';


<IconUser size={24} color="#6366f1" stroke={1.5} />
<IconMan size={32} color="#3b82f6" stroke={2} />
<IconWoman size={32} color="#F90772" stroke={2} />
<IconUsers size={40} color="#8b5cf6" stroke={1.5} />

Storybook Integration

Section titled “Storybook Integration”

Created two comprehensive Storybook galleries:

HeroiconsGallery.stories.tsx

Section titled “HeroiconsGallery.stories.tsx”

Located: /packages/storybook/stories/HeroiconsGallery.stories.tsx

Stories:

  1. Solid24Gallery - 24px solid (filled) icons
  2. Outline24Gallery - 24px outline (stroke) icons
  3. PeopleIconsShowcase - People-focused icons for housing scenarios

TablerIconsGallery.stories.tsx

Section titled “TablerIconsGallery.stories.tsx”

Located: /packages/storybook/stories/TablerIconsGallery.stories.tsx

Stories:

  1. PeopleIconsGallery - Essential people icons for housing/roommate scenarios
  2. UserVariationsGallery - Different user icon shapes and styles
  3. LocationHousingGallery - Home, building, map pin icons
  4. ColorVariationsDemo - Examples of colored icons for branding
  5. SizeComparison - Icon size examples from 16px to 64px

Next Steps for Housing Marker Project

Section titled “Next Steps for Housing Marker Project”

Now that we have both icon libraries installed, you can:

  1. Browse the galleries in Storybook to find people icons you like

  2. Choose your preferred style:

    • Heroicons: Simpler, cleaner, Tailwind CSS style
    • Tabler: More detailed, explicit gender options (IconMan/IconWoman)

  3. Select icons for the 12 household compositions:

    • Single man
    • Single woman
    • Man and woman
    • Two women
    • Two men
    • Two men and a child
    • Two women and a child
    • Man and woman and a child
    • Two men and a woman
    • Three women
    • Three men
    • Two women and a man

  4. Direct the art: Tell me which icons to use, colors for shirts/hair, and marker background colors

  5. Create composite markers: I’ll combine multiple people icons into single map markers with droplet backgrounds

Installation Verification

Section titled “Installation Verification”

✅ Followed AI directory safety protocol:

  • Verified working directory: /Users/work-station/company/cloudalt-frontend
  • Installed at workspace root level
  • Both packages installed successfully
  • Storybook rebuilt successfully (26 seconds)
  • No errors in build

File System Impact

Section titled “File System Impact”

New Files Created:

  • /packages/storybook/stories/HeroiconsGallery.stories.tsx
  • /packages/storybook/stories/TablerIconsGallery.stories.tsx

Modified Files:

  • /package.json - Added @heroicons/react and @tabler/icons-react

Dependencies Added:

{
  "@heroicons/react": "^2.2.0",
  "@tabler/icons-react": "^3.35.0"
}

Resources

Section titled “Resources”