@nice2dev/icons-social

Social media, messaging, reactions, and profile icons for Nice2Dev UI library.

Installation

pnpm add @nice2dev/icons-social

Features

• 🎨 60 Social Icons - Comprehensive set of social media and communication icons
• 🎭 3 Variants - Filled, outlined, and duotone rendering modes
• ✨ 9 Animations - Built-in SMIL animations (pulse, grow, shake, spin, bounce, fade, flip, slide, glow)
• 🏷️ Brand Colors - Pre-configured brand colors for platform icons
• 📦 Tree-shakeable - Import only what you need
• 🔷 TypeScript - Full type safety with comprehensive types

Icon Categories

Platform Icons (15)

Social media platform icons with brand colors:

| Icon | Brand Color | | --------------- | ----------- | | FacebookIcon | #1877f2 | | TwitterIcon | #1da1f2 | | InstagramIcon | #e4405f | | LinkedInIcon | #0077b5 | | YouTubeIcon | #ff0000 | | TikTokIcon | #000000 | | SnapchatIcon | #fffc00 | | PinterestIcon | #bd081c | | RedditIcon | #ff4500 | | DiscordIcon | #5865f2 | | SlackIcon | Multi-color | | TwitchIcon | #9146ff | | GitHubIcon | #181717 | | DribbbleIcon | #ea4c89 | | BehanceIcon | #1769ff |

Messaging Icons (15)

Communication and messaging icons:

ChatIcon, ChatBubbleIcon, ChatDotsIcon, MessageIcon, MessageSquareIcon, SendIcon, InboxIcon, MailIcon, MailOpenIcon, ReplyIcon, ReplyAllIcon, ForwardIcon, AttachmentIcon, EmojiIcon, StickerIcon

Reaction Icons (15)

Social media engagement and reaction icons:

LikeIcon, DislikeIcon, LoveIcon, HahaIcon, WowIcon, SadIcon, AngryIcon, ClapIcon, FireIcon, ThumbsUpIcon, ThumbsDownIcon, CelebrateIcon, SupportIcon, InsightfulIcon, CuriousIcon

Profile Icons (15)

User profile and social relationship icons:

UserIcon, UserCircleIcon, UserPlusIcon, UserMinusIcon, UserCheckIcon, UsersIcon, UsersGroupIcon, FriendIcon, FollowIcon, UnfollowIcon, BlockIcon, VerifiedIcon, BadgeIcon, AvatarIcon, ProfileIcon

Usage

Basic Usage

import { FacebookIcon, LoveIcon, ChatIcon, UserIcon } from '@nice2dev/icons-social';

// Platform icon with brand color
<FacebookIcon size={32} />

// Reaction with animation
<LoveIcon animation="pulse" />

// Messaging icon
<ChatIcon variant="outlined" />

// Profile icon
<UserIcon size={24} color="#333" />

Icon Variants

import { TwitterIcon } from '@nice2dev/icons-social';

// Filled (default)
<TwitterIcon variant="filled" />

// Outlined
<TwitterIcon variant="outlined" />

// Duotone
<TwitterIcon variant="duotone" accentColor="#444" />

Animations

import { LikeIcon } from '@nice2dev/icons-social';

<LikeIcon animation="pulse" />   // Pulsing effect
<LikeIcon animation="grow" />    // Size growth
<LikeIcon animation="shake" />   // Shake/wiggle
<LikeIcon animation="spin" />    // 360° rotation
<LikeIcon animation="bounce" />  // Bouncing effect
<LikeIcon animation="fade" />    // Fade in/out
<LikeIcon animation="flip" />    // 3D flip
<LikeIcon animation="slide" />   // Slide motion
<LikeIcon animation="glow" />    // Glowing effect

Grouped Imports

import { platformIcons, messagingIcons, reactionIcons, profileIcons } from '@nice2dev/icons-social';

// Access all platform icons
const { FacebookIcon, TwitterIcon } = platformIcons;

// Use in icon picker
const allReactions = Object.values(reactionIcons);

Custom Colors

import { SendIcon } from '@nice2dev/icons-social';

// Override default colors
<SendIcon color="#333333" accentColor="#0066ff" />;

Props

| Prop | Type | Default | Description | | ------------- | ------------------------------------- | ---------------- | ---------------------------------- | | size | number | 24 | Icon size in pixels | | color | string | 'currentColor' | Primary icon color | | accentColor | string | - | Secondary/accent color for duotone | | variant | 'filled' \| 'outlined' \| 'duotone' | 'filled' | Icon style variant | | animation | SocialIconAnimation | - | Animation type | | className | string | - | Additional CSS class | | style | CSSProperties | - | Inline styles |

TypeScript

import type {
  SocialIconProps,
  SocialIconAnimation,
  PlatformIconName,
  MessagingIconName,
  ReactionIconName,
  ProfileIconName,
} from '@nice2dev/icons-social';

// Type-safe icon selection
const iconName: PlatformIconName = 'Facebook';
const animation: SocialIconAnimation = 'pulse';

License

MIT © Nice2Dev