@otto201613/yoo-icons

Typed React SVG components for Yoo applications. The package currently contains 367 icon components: 220 in the main collection and 147 in the newer V2 collection.

Installation

pnpm add @otto201613/yoo-icons react react-dom

Equivalent npm install and yarn add commands also work. The package requires Node.js 18 or newer and React 19.

Package exports

| Entry | Contents | | -------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | @otto201613/yoo-icons | Main collection: product, navigation, activity, empty-state, marketplace, and business icons | | @otto201613/yoo-icons/V2 | Newer general-purpose collection grouped around direction, forms, menus, tips, tools, withdrawal, and website use cases |

Import icons only from these two public entries. Both entries have ESM, CommonJS, and TypeScript declaration builds and are tree-shakeable in modern bundlers.

Basic usage

import { LogoIcon } from '@otto201613/yoo-icons'
import { DownArrowIcon } from '@otto201613/yoo-icons/V2'

export function BrandLink() {
    return (
        <a href="/" className="inline-flex items-center gap-2">
            <LogoIcon width={36} height={36} aria-label="Yoo home" role="img" />
            <DownArrowIcon className="h-6 w-6 text-white" aria-hidden="true" />
        </a>
    )
}

Each component renders an inline <svg> and accepts standard React SVG props, including className, width, height, style, onClick, role, and ARIA attributes. V2 monochrome icons generally use currentColor, so their color can be controlled with CSS or Tailwind text-color utilities:

import { CheckCircleIcon, DeleteIcon } from '@otto201613/yoo-icons/V2'

export function StatusIcons() {
    return (
        <div className="flex items-center gap-3">
            <CheckCircleIcon className="h-6 w-6 text-green-500" aria-label="Complete" role="img" />
            <DeleteIcon className="h-6 w-6 text-red-500" aria-label="Delete" role="img" />
        </div>
    )
}

Some branded and illustration icons intentionally contain fixed colors and will not fully follow currentColor. Override width and height when their built-in dimensions are not appropriate.

Decorative icons should use aria-hidden="true". Meaningful icons should use an accessible label, usually aria-label with role="img", or be accompanied by visible text.

Using names that exist in both collections

Several names, such as SearchIcon, MenuIcon, TipsIcon, WarnIcon, and CopyIcon, exist in both entries. Alias them when a file needs both versions:

import { SearchIcon as LegacySearchIcon } from '@otto201613/yoo-icons'
import { SearchIcon as SearchV2Icon } from '@otto201613/yoo-icons/V2'

Main collection exports

Import the following icons from @otto201613/yoo-icons.

• Logo (3): LogoIcon, LogoLabelIcon, LogoforMobileIcon
• Primary navigation (10): ActivityIcon, BattlesIcon, MarketplaceIcon, MarketplaceIconNew, RankingIcon, UnboxingIcon, YooPointsIcon, MenuIcon, BonusIcon, InventoryIcon
• Language (2): UsIcon, CnIcon
• General (15): BackpackIcon, BattleAmountIcon, CaseIcon, MarketTransactionIcon, OnlineIcon, ShieldIcon, WalletIcon, WalletIconWhite, AcceptIcon, ArrowIcon, MFAIcon, NoticeIcon, UserCenterArrowIcon, HoverCenterIcon, HoverCenterRemoveIcon
• Social media (3): DiscordIcon, FacebookIcon, TwitterIcon
• Ring decoration (2): RingLeftIcon, RingRightIcon
• Search (1): SearchIcon
• Close (2): XIcon, XIconNew
• Check (1): CheckIcon
• Collection state (2): CollectIcon, CollectedIcon
• Information (3): TipsInfoIcon, WarnIcon, WarnErrorIcon
• Toast and tips (9): TipsModalSuccessIcon, TipsModalErrorIcon, ToastClosedIcon, ToastCongratulationsIcon, ToastErrorIcon, ToastNoticeIcon, ToastPromptIcon, ToastSuccessIcon, TipsIcon
• Editing tools (3): CopyIcon, EditIcon, SaveIcon
• User account (11): UserInfoMenuIcon, UserWithdrawIcon, UserLoginOutIcon, SupportIcon, UserSettingIcon, EmailIcon, PasswordIcon, CustomerIcon, Camera, DiscordTipsIcon, DoubleArrowIcon
• Skeleton (1): BoxSkeletonIcon
• Tags and state (13): BatterIcon, BatterNewIcon, RngIcon, NotLordIcon, NotRngIcon, ComboIcon, LockOpenIcon, LockCloseIcon, LockCloseIconNew, EyeIcon, EyeCloseIcon, ReBackIcon, PointIcon
• Leaderboard (5): LeaderboardBackIcon, LeaderboardInfoIcon, OneIcon, TwoIcon, ThreeIcon
• Live drop (5): LiveDropLevelIcon, LiveDropWowIcon, LiveDropBoxIcon, LiveDropTopBgIcon, LiveDropFireIcon
• Sign decoration and actions (3): SignBottomRightIcon, SignTopLeftIcon, SignOutIcon
• Empty states (12): BoxEmptyIcon, UserEmptyIcon, UserRankEmptyIcon, BackpackEmptyIcon, StockEmptyIcon, NotFoundEmptyIcon, DefaultEmptyIcon, CardEmptyIcon, MoreCardEmptyIcon, CardEmptyIconNew, ListEmptyIcon, CardEmptyProfile
• Box product and risk (15): BoxProductCardIcon, BoxDropProductCardIcon, BoxGroupLeftIcon, BoxGroupRightIcon, BoxOpenArrowIcon, BoxOpenMarkIcon, DemoPlayIcon, DemoPlayIconNew, BoxLordIcon, UnionIcon, FreeBoxTagIcon, FreeBoxTagIconMobile, LowRiskIcon, MediumRiskIcon, HighRiskIcon
• Box opening (15): BoxesLotteryArrowIcon, CardLightingEffectsIcon, BoxesFairIcon, BoxesHelperIcon, BoxesSoundsIcon, BoxesStatementIcon, BoxesCollectIcon, BoxesCollectedIcon, BoxesSoundsOffIcon, LordCardIcon, LittleCrownIcon, ComboBoxCardIcon, BoxesBackIcon, BoxesInfoIcon, ComboNewIcon
• Activity (9): ActivityBoxesInfoBackgroundIcon, ActivityBoxesInfoIcon, ActivityTaskIcon, ActivityTaskPolygonIcon, ActivityBoxIcon, ActivityMissionsIcon, ActivityDailyCasesIcon, ActivityArrow, ActivityBgIcons
• Chevron (2): ChevronCircleLeftIcon, ChevronCircleRightIcon
• Clock (1): Clock3Icon
• Top-up (2): PromotionIcon, PromotionTipsIcon
• Rank (6): FirstIcon, FirstMobileIcon, TwoNDIcon, TwoNDMobileIcon, ThreeNDIcon, ThreeNDMobileIcon
• Invitation (2): ActivityInvideIcon, ActivityInvideIconMobile
• Select (1): DropSelectIcon
• Provably fair (1): ProvablyFalrIcon
• New navigation (16): MenuNewIcon, BonusNewIcon, UnboxingNewIcon, MarketNewIcon, InventoryNewIcon, MenuActivitedIcon, BonusActivitedIcon, UnboxingActivitedIcon, MarketActivitedIcon, InventoryActivitedIcon, UnboxingToTop, UnboxingToTopActive, LeadboardIcon, EventIcon, UpgradeIcon, UpgradeAcytivitedIcon
• Market (3): MarketBalanceIcon, MarkeTransferIcon, MarkeWallet
• Affiliate (15): LinkIcon, ReferralIcon, ClaimIcon, DollorIcon, InstantIcon, ShareIcon, StayActiveIcon, TrackIcon, RightIcon, InfoIcon, BackIcon, BackMobileIcon, AffiliateIcon, ACopyIcon, AEditIcon
• Bonus (9): BonusTitleBg, BonusClockIcon, BonusTipsIcon, BonusTitleBgIcon, BonusRightIcon, BonusLockIcon, BonusTitleIcon, BonusArrowIcon, BonusTitleDicIcon
• Upgrade (2): UpgradeBadgeIcon, UpgradeMenuIcon
• Exchange (7): ExchangeMenuIcon, ExchangeInfoIcon, ExchangeHistoryIcon, ExchangeSelectIcon, ExchangeArrowIcon, ExchangeClearIcon, ExchangeLightIcon
• Unboxing categories (8): CatAllBoxesIcon, CatMostPopularIcon, CatLordBoxIcon, CatComboBoxIcon, CatTreasureHunterIcon, CatRelaxingMomentIcon, CatOfficialSeriesIcon, CatOtherIcon

The main entry also exports the IconProps TypeScript type.

V2 collection exports

Import the following icons from @otto201613/yoo-icons/V2.

• Direction (9): DownArrowIcon, LeftArrowIcon, LeftOutlinedIcon, RightArrowIcon, RightOutlinedIcon, StepForwardOutlinedIcon, UpArrowIcon, CheckCircleIcon, SkipIcon
• Form (12): EditOutlinedIcon, EmailOutlinedIcon, EyeInvisibleOutlinedIcon, EyeOutlinedIcon, FilterIcon, PassWordIcon, SearchIcon, CheckBoxIcon, CheckedBoxIcon, PassWordPicIcon, EmailPicIcon, CheckOutlined
• Menu (10): AffiliateMenuIcon, BonusMeanuIcon, ExchangeMenuIcon, IndexMenuIcon, InventoryMenuIcon, LeaderboardMenuIcon, MarketMenuIcon, MenuIcon, UpgradeMenuIcon, MenuNavIcon
• Market (3): MarketMyIcon, MarketSellingIcon, MarketSoldIcon
• Tips and status (14): CricleInfoIcon, LineCricleInfoIcon, HexgonInfoIcon, HightRiskIcon, LowRiskIcon, MediumRiskIcon, NotificationIcon, TriangleInfoIcon, TipsIcon, WarnIcon, SuccessIcon, ErrorIcon, CricleSuccessIcon, CricleErrorIcon
• Tools (23): AddIcon, CameraIcon, ClockIcon, CollapseIcon, ExpandIcon, ClosedMobileIcon, ClosedPcIcon, ClosedIcon, CollectIcon, CollectedIcon, CopyIcon, CopyMoreIcon, DeleteIcon, HistoryIcon, LockIcon, RecordIcon, RefreshIcon, SaveIcon, ShareIcon, UnLockIcon, RuleIcon, NoticeIcon, WaitingIcon
• Withdrawal (5): WithdrawalAchIcon, WithdrawalCashIcon, WithdrawalPaypalIcon, WithdrawalRefundIcon, WithdrawalVenmoIcon
• Website and payment (71): BestIcon, BackpackIcon, BoxLevelBadgeIcon, CardIcon, CrownIcon, DisCordIcon, DollarSymbolIcon, EmailIcon, FairnessVerificationIcon, GoldCoinIcon, GoogleIcon, HexagonDollorIcon, LuckDropIcon, MedalsIcon, OpenBoxIcon, QuestionsIcon, CricleQuestionsIcon, SoundIcon, TagIcon, TeamIcon, TransferIcon, TransportationIcon, UnSoundIcon, UpgradeAddIcon, UserAvatarCircleIcon, UserAvatarHexagonIcon, UserAvatarIcon, WalletIcon, WithDrawIcon, FairIcon, BadgeVerifyIcon, VerifyLevelIcon, ProhibitIcon, VerificationIcon, UserPointsIcon, FAQIcon, ContactUsIcon, CookiePolicyIcon, PrivacyPolicyIcon, ShippingIcon, TermsOfServiceIcon, MarketPolicyIcon, SupportIcon, ReedemIcon, RewardLockIcon, BalanceHistoryIcon, GameHistoryIcon, OtherIcon, AccountIcon, PaypalIcon, VisaIcon, PayCardIcon, GpayIcon, ApplePayIcon, FooterIcon, BestDropIcon, ShipIcon, UsdtTrcIcon, UsdtErcIcon, PaypalIconPay, ComboTargetBottomIcon, EyeIcon, InfoEyesIcon, LorderTitleBg, GlowingBackgroundIcon, TostBgIcon, PayCardColorIcon, VisaColorIcon, GpayColorIcon, ApplePayColorIcon, CongratulationsIcon

Some public export names retain historical spellings such as Invide, ProvablyFalr, Activited, Marke, Dollor, Cricle, Hight, Meanu, Reedem, and Tost. Use the exact names shown above.

Notes

• The package contains components, not raw SVG files or an icon font.
• Import only the icons you use so a production bundler can remove unused exports.
• The npm package is for external consumers. Contributors inside the YooBox monorepo continue to use the local @gjmh/icons workspace package name.