Create table of icon name changes for v2 release

[steveoh]

A number of icons have also been renamed. For example, the "mail" icon has been renamed to "envelope" and the "search" icon has been renamed to "magnifying glass". This naming more accurately describes what the icon is without making assumptions about how it's being used.

This is not super helpful. Something like the table below would be great.

v1	v2
adjustments	adjustments-vertical
annotation	chat-bubble-bottom-center-text
archive	archive-box
arrow-circle-down	arrow-down-circle
arrow-circle-left	arrow-left-circle
arrow-circle-right	arrow-right-circle
arrow-circle-up	arrow-up-circle
arrow-narrow-down	arrow-long-down
arrow-narrow-left	arrow-long-left
arrow-narrow-right	arrow-long-right
arrow-narrow-up	arrow-long-up
arrow-sm-left	removed
arrow-sm-right	removed
arrow-sm-up	removed
arrow-sm-down	removed
arrows-expand	arrows-pointing-out
badge-check	check-badge
ban	no-symbol
bookmark-alt	bookmark-square
cash	banknotes
chart-square-bar	chart-bar-square
chat-alt-2	chat-bubble-left-right
chat-alt	chat-bubble-left-ellipsis
chat	chat-bubble-oval-left-ellipsis
chip	cpu-chip
clipboard-check	clipboard-document-check
clipboard-copy	clipboard-document
clipboard-list	clipboard-document-list
cloud-download	cloud-arrow-down
cloud-upload	cloud-arrow-up
code	code-bracket
collection	rectangle-stack
color-swatch	swatch
cube-transparent	removed
currency-bangladeshi	removed
cursor-click	cursor-arrow-rays
database	circle-stack
desktop-computer	computer-desktop
device-mobile	device-phone-mobile
document-add	document-plus
document-download	document-arrow-down
document-remove	document-minus
document-report	document-chart-bar
document-search	document-magnifying-glass
dots-circle-horizontal	ellipsis-horizontal-circle
dots-horizontal	ellipsis-horizontal
dots-vertical	ellipsis-vertical
download	arrow-down-tray
duplicate	square-2-stack
emoji-happy	face-smile
emoji-sad	face-frown
exclamation	exclamation
external-link	arrow-top-right-on-square
eye-off	eye-slash
fast-forward	forward
filter	funnel
folder-add	folder-plus
folder-download	folder-arrow-down
folder-remove	folder-minus
globe	globe-europe-africa
hand	hand-raised
inbox-in	inbox-arrow-down
library	building-library
lightning-bolt	bolt
location-marker	map-pin
login	arrow-left-on-rectangle
logout	arrow-right-on-rectangle
mail-open	envelope-open
mail	envelope
menu-alt-1	bars-3-center-left
menu-alt-2	bars-3-bottom-left
menu-alt-3	bars-3-bottom-right
menu-alt-4	bars-2
menu	bars-3
minus-sm	removed
music-note	musical-note
office-building	building-office
pencil-alt	pencil-square
phone-incoming	phone-arrow-down-left
phone-missed-call	phone-x-mark
phone-outgoing	phone-arrow-up-right
photograph	photo
plus-sm	removed
puzzle	puzzle-piece
qrcode	qr-code
receipt-tax	receipt-percent
refresh	arrow-path
reply	arrow-uturn-left
rewind	backward
rss	removed
save-as	arrow-down-on-square-stack
save	arrow-down-on-square
search-circle	magnifying-glass-circle
search	magnifying-glass
selector	removed
sort-ascending	removed
sort-descending	removed
speakerphone	megaphone
status-offline	signal-slash
status-online	signal
support	lifebuoy
switch-horizontal	arrow-right-left
switch-vertical	arrow-up-down
table	table-cells
template	rectangle-group
terminal	command-line
thumb-down	hand-thumb-down
thumb-up	hand-thumb-up
translate	language
trending-down	arrow-trending-down
trending-up	arrow-trending-up
upload	arrow-up-tray
user-add	user-plus
user-remove	removed
variable	removed
view-boards	view-columns
view-grid-add	squares-plus
view-grid	squares-2x2
view-list	bars-4
volume-off	speaker-x-mark
volume-up	speaker-wave
x	x-mark
zoom-in	magnifying-glass-plus
zoom-out	magnifying-glass-minu

refs https://github.com/tailwindlabs/heroicons/issues/746, https://github.com/tailwindlabs/heroicons/issues/749

[CaptainMack]

Table or v1 keywords for searching could be useful - I happened to be working on icons on our application, when the release hit. Suddenly I could search icons that I couldn't use in our application and therefore updated the package, leading to a lot of naming changes. It doesn't even have to be a table, if you could add the old icon keywords to the search, e.g. searching for wireless shows the wifi icon currently, adding the v1 icon names to the list of searchable, but hidden keywords, could be super useful.

Maybe also a top banner or something that mentions that v2 has been released with a link to changelogs/naming convention changes.

[Bramjetten]

We use Heroicons in Spina CMS and I'd love to update our icons to the new set. I'm thinking about creating such a lookup table manually.

Edit: I decided to write it out manually. Quite the meditative experience. Here's my Ruby hash containing all name changes:

{
    "adjustments" => "adjustments-vertical",
    "annotation" => "chat-bubble-bottom-center-text",
    "archive" => "archive-box",
    "arrow-circle-down" => "arrow-down-circle",
    "arrow-circle-left" => "arrow-left-circle",
    "arrow-circle-right" => "arrow-right-circle",
    "arrow-circle-up" => "arrow-up-circle",
    "arrow-narrow-down" => "arrow-long-down",
    "arrow-narrow-left" => "arrow-long-left",
    "arrow-narrow-right" => "arrow-long-right",
    "arrow-narrow-up" => "arrow-long-up",
    "arrow-sm-left" => nil,
    "arrow-sm-right" => nil,
    "arrow-sm-up" => nil,
    "arrow-sm-down" => nil,
    "arrows-expand" => "arrows-pointing-out",
    "badge-check" => "check-badge",
    "ban" => "no-symbol",
    "bookmark-alt" => "bookmark-square",
    "cash" => "banknotes",
    "chart-square-bar" => "chart-bar-square",
    "chat-alt-2" => "chat-bubble-left-right",
    "chat-alt" => "chat-bubble-left-ellipsis",
    "chat" => "chat-bubble-oval-left-ellipsis",
    "chip" => "cpu-chip",
    "clipboard-check" => "clipboard-document-check",
    "clipboard-copy" => "clipboard-document",
    "clipboard-list" => "clipboard-document-list",
    "cloud-download" => "cloud-arrow-down",
    "cloud-upload" => "cloud-arrow-up",
    "code" => "code-bracket",
    "collection" => "rectangle-stack",
    "color-swatch" => "swatch",
    "cube-transparent" => nil,
    "currency-bangladeshi" => nil,
    "cursor-click" => "cursor-arrow-rays",
    "database" => "circle-stack",
    "desktop-computer" => "computer-desktop",
    "device-mobile" => "device-phone-mobile",
    "document-add" => "document-plus",
    "document-download" => "document-arrow-down",
    "document-remove" => "document-minus",
    "document-report" => "document-chart-bar",
    "document-search" => "document-magnifying-glass",
    "dots-circle-horizontal" => "ellipsis-horizontal-circle",
    "dots-horizontal" => "ellipsis-horizontal",
    "dots-vertical" => "ellipsis-vertical",
    "download" => "arrow-down-tray",
    "duplicate" => "square-2-stack",
    "emoji-happy" => "face-smile",
    "emoji-sad" => "face-frown",
    "exclamation" => "exclamation",
    "external-link" => "arrow-top-right-on-square",
    "eye-off" => "eye-slash",
    "fast-forward" => "forward",
    "filter" => "funnel",
    "folder-add" => "folder-plus",
    "folder-download" => "folder-arrow-down",
    "folder-remove" => "folder-minus",
    "globe" => "globe-europe-africa",
    "hand" => "hand-raised",
    "inbox-in" => "inbox-arrow-down",
    "library" => "building-library",
    "lightning-bolt" => "bolt",
    "location-marker" => "map-pin",
    "login" => "arrow-left-on-rectangle",
    "logout" => "arrow-right-on-rectangle",
    "mail-open" => "envelope-open",
    "mail" => "envelope",
    "menu-alt-1" => "bars-3-center-left",
    "menu-alt-2" => "bars-3-bottom-left",
    "menu-alt-3" => "bars-3-bottom-right",
    "menu-alt-4" => "bars-2",
    "menu" => "bars-3",
    "minus-sm" => nil,
    "music-note" => "musical-note",
    "office-building" => "building-office",
    "pencil-alt" => "pencil-square",
    "phone-incoming" => "phone-arrow-down-left",
    "phone-missed-call" => "phone-x-mark",
    "phone-outgoing" => "phone-arrow-up-right",
    "photograph" => "photo",
    "plus-sm" => nil,
    "puzzle" => "puzzle-piece",
    "qrcode" => "qr-code",
    "receipt-tax" => "receipt-percent",
    "refresh" => "arrow-path",
    "reply" => "arrow-uturn-left",
    "rewind" => "backward",
    "rss" => nil,
    "save-as" => "arrow-down-on-square-stack",
    "save" => "arrow-down-on-square",
    "search-circle" => "magnifying-glass-circle",
    "search" => "magnifying-glass",
    "selector" => nil,
    "sort-ascending" => nil,
    "sort-descending" => nil,
    "speakerphone" => "megaphone",
    "status-offline" => "signal-slash",
    "status-online" => "signal",
    "support" => "lifebuoy",
    "switch-horizontal" => "arrow-right-left",
    "switch-vertical" => "arrow-up-down",
    "table" => "table-cells",
    "template" => "rectangle-group",
    "terminal" => "command-line",
    "thumb-down" => "hand-thumb-down",
    "thumb-up" => "hand-thumb-up",
    "translate" => "language",
    "trending-down" => "arrow-trending-down",
    "trending-up" => "arrow-trending-up",
    "upload" => "arrow-up-tray",
    "user-add" => "user-plus",
    "user-remove" => nil,
    "variable" => nil,
    "view-boards" => "view-columns",
    "view-grid-add" => "squares-plus",
    "view-grid" => "squares-2x2",
    "view-list" => "bars-4",
    "volume-off" => "speaker-x-mark",
    "volume-up" => "speaker-wave",
    "x" => "x-mark",
    "zoom-in" => "magnifying-glass-plus",
    "zoom-out" => "magnifying-glass-minus"
}

[basicallydan]

@Bramjetten Thank you for doing this

[basicallydan]

Maybe also a top banner or something that mentions that v2 has been released with a link to changelogs/naming convention changes.

I agree, this is a good idea 💯

[ryanburns23]

Thank you @steveoh & @Bramjetten for the initial list. 🤙

I needed it in JS with a bit different structure. Dropping that here in case it helps anyone:

const heroiconsV1toV2 = {
  AdjustmentsIcon: 'AdjustmentsVerticalIcon',
  AnnotationIcon: 'ChatBubbleBottomCenterTextIcon',
  ArchiveIcon: 'ArchiveBoxIcon',
  ArrowCircleDownIcon: 'ArrowDownCircleIcon',
  ArrowCircleLeftIcon: 'ArrowLeftCircleIcon',
  ArrowCircleRightIcon: 'ArrowRightCircleIcon',
  ArrowCircleUpIcon: 'ArrowUpCircleIcon',
  ArrowNarrowDownIcon: 'ArrowLongDownIcon',
  ArrowNarrowLeftIcon: 'ArrowLongLeftIcon',
  ArrowNarrowRightIcon: 'ArrowLongRightIcon',
  ArrowNarrowUpIcon: 'ArrowLongUpIcon',
  ArrowSmLeftIcon: null,
  ArrowSmRightIcon: null,
  ArrowSmUpIcon: null,
  ArrowSmDownIcon: null,
  ArrowsExpandIcon: 'ArrowsPointingOutIcon',
  BadgeCheckIcon: 'CheckBadgeIcon',
  BanIcon: 'NoSymbolIcon',
  BookmarkAltIcon: 'BookmarkSquareIcon',
  CashIcon: 'BanknotesIcon',
  ChartSquareBarIcon: 'ChartBarSquareIcon',
  ChatAlt2Icon: 'ChatBubbleLeftRightIcon',
  ChatAltIcon: 'ChatBubbleLeftEllipsisIcon',
  ChatIcon: 'ChatBubbleOvalLeftEllipsisIcon',
  ChipIcon: 'CpuChipIcon',
  ClipboardCheckIcon: 'ClipboardDocumentCheckIcon',
  ClipboardCopyIcon: 'ClipboardDocumentIcon',
  ClipboardListIcon: 'ClipboardDocumentListIcon',
  CloudDownloadIcon: 'CloudArrowDownIcon',
  CloudUploadIcon: 'CloudArrowUpIcon',
  CodeIcon: 'CodeBracketIcon',
  CollectionIcon: 'RectangleStackIcon',
  ColorSwatchIcon: 'SwatchIcon',
  CubeTransparentIcon: null,
  CurrencyBangladeshiIcon: null,
  CursorClickIcon: 'CursorArrowRaysIcon',
  DatabaseIcon: 'CircleStackIcon',
  DesktopComputerIcon: 'ComputerDesktopIcon',
  DeviceMobileIcon: 'DevicePhoneMobileIcon',
  DocumentAddIcon: 'DocumentPlusIcon',
  DocumentDownloadIcon: 'DocumentArrowDownIcon',
  DocumentRemoveIcon: 'DocumentMinusIcon',
  DocumentReportIcon: 'DocumentChartBarIcon',
  DocumentSearchIcon: 'DocumentMagnifyingGlassIcon',
  DotsCircleHorizontalIcon: 'EllipsisHorizontalCircleIcon',
  DotsHorizontalIcon: 'EllipsisHorizontalIcon',
  DotsVerticalIcon: 'EllipsisVerticalIcon',
  DownloadIcon: 'ArrowDownTrayIcon',
  DuplicateIcon: 'Square2StackIcon',
  EmojiHappyIcon: 'FaceSmileIcon',
  EmojiSadIcon: 'FaceFrownIcon',
  ExclamationIcon: 'ExclamationIcon',
  ExternalLinkIcon: 'ArrowTopRightOnSquareIcon',
  EyeOffIcon: 'EyeSlashIcon',
  FastForwardIcon: 'ForwardIcon',
  FilterIcon: 'FunnelIcon',
  FolderAddIcon: 'FolderPlusIcon',
  FolderDownloadIcon: 'FolderArrowDownIcon',
  FolderRemoveIcon: 'FolderMinusIcon',
  GlobeIcon: 'GlobeEuropeAfricaIcon',
  HandIcon: 'HandRaisedIcon',
  InboxInIcon: 'InboxArrowDownIcon',
  LibraryIcon: 'BuildingLibraryIcon',
  LightningBoltIcon: 'BoltIcon',
  LocationMarkerIcon: 'MapPinIcon',
  LoginIcon: 'ArrowLeftOnRectangleIcon',
  LogoutIcon: 'ArrowRightOnRectangleIcon',
  MailOpenIcon: 'EnvelopeOpenIcon',
  MailIcon: 'EnvelopeIcon',
  MenuAlt1Icon: 'Bars3CenterLeftIcon',
  MenuAlt2Icon: 'Bars3BottomLeftIcon',
  MenuAlt3Icon: 'Bars3BottomRightIcon',
  MenuAlt4Icon: 'Bars2Icon',
  MenuIcon: 'Bars3Icon',
  MinusSmIcon: null,
  MusicNoteIcon: 'MusicalNoteIcon',
  OfficeBuildingIcon: 'BuildingOfficeIcon',
  PencilAltIcon: 'PencilSquareIcon',
  PhoneIncomingIcon: 'PhoneArrowDownLeftIcon',
  PhoneMissedCallIcon: 'PhoneXMarkIcon',
  PhoneOutgoingIcon: 'PhoneArrowUpRightIcon',
  PhotographIcon: 'PhotoIcon',
  PlusSmIcon: null,
  PuzzleIcon: 'PuzzlePieceIcon',
  QrcodeIcon: 'QrCodeIcon',
  ReceiptTaxIcon: 'ReceiptPercentIcon',
  RefreshIcon: 'ArrowPathIcon',
  ReplyIcon: 'ArrowUturnLeftIcon',
  RewindIcon: 'BackwardIcon',
  RssIcon: null,
  SaveAsIcon: 'ArrowDownOnSquareStackIcon',
  SaveIcon: 'ArrowDownOnSquareIcon',
  SearchCircleIcon: 'MagnifyingGlassCircleIcon',
  SearchIcon: 'MagnifyingGlassIcon',
  SelectorIcon: null,
  SortAscendingIcon: null,
  SortDescendingIcon: null,
  SpeakerphoneIcon: 'MegaphoneIcon',
  StatusOfflineIcon: 'SignalSlashIcon',
  StatusOnlineIcon: 'SignalIcon',
  SupportIcon: 'LifebuoyIcon',
  SwitchHorizontalIcon: 'ArrowRightLeftIcon',
  SwitchVerticalIcon: 'ArrowUpDownIcon',
  TableIcon: 'TableCellsIcon',
  TemplateIcon: 'RectangleGroupIcon',
  TerminalIcon: 'CommandLineIcon',
  ThumbDownIcon: 'HandThumbDownIcon',
  ThumbUpIcon: 'HandThumbUpIcon',
  TranslateIcon: 'LanguageIcon',
  TrendingDownIcon: 'ArrowTrendingDownIcon',
  TrendingUpIcon: 'ArrowTrendingUpIcon',
  UploadIcon: 'ArrowUpTrayIcon',
  UserAddIcon: 'UserPlusIcon',
  UserRemoveIcon: null,
  VariableIcon: null,
  ViewBoardsIcon: 'ViewColumnsIcon',
  ViewGridAddIcon: 'SquaresPlusIcon',
  ViewGridIcon: 'Squares2x2Icon',
  ViewListIcon: 'Bars4Icon',
  VolumeOffIcon: 'SpeakerXMarkIcon',
  VolumeUpIcon: 'SpeakerWaveIcon',
  XIcon: 'XMarkIcon',
  ZoomInIcon: 'MagnifyingGlassPlusIcon',
  ZoomOutIcon: 'MagnifyingGlassMinusIcon',
};

[sschoger]

Hey! Thanks for putting this list together!

We're working on adding a bunch of the missing ones back. We've already added the sort-ascending, sort-descending, selector, and rss icons. Will continue working through these missing icons 👍🏻

[maccman]

You are doing the lord's work - thank you!

[maccman]

@sschoger any chance of an upgrade find/replace script?

[binotaliu]

exclamation -> exclamation-triangle

[Mansehej]

@ryanburns23 Thanks for this! Just as an edit,

Squares2x2Icon

Is actually

Squares2X2Icon

[PicchiKevin]

Created a small migration script. I thought it could be helpful for everyone. It's not perfect nor optimised, feel free to adapt it.

https://gist.github.com/PicchiKevin/86d0a4cc0a872a1ae4dfac919b7c49ce

[mkrkelj1]

@ryanburns23 @PicchiKevin Thanks for putting this together - unfortunately some of these are breaking. For example, Arrow should be Arrows:

• SwitchHorizontalIcon: ArrowsRightLeftIcon
• SwitchVerticalIcon: ArrowsUpDownIcon

I'll update and add more as I come across them.

[razzeee]

SelectorIcon: ChevronUpDownIcon

[sschoger]

Hey!

We've updated the release notes to include a list of all of the icons that have been renamed along with their updated names.

https://github.com/tailwindlabs/heroicons/releases/tag/v2.0.0

We also went ahead and added the icons that were missing from the set that were previously in v1 👍🏻

[christiangenco]

Based on @PicchiKevin's script I wrote a heroicons v2 migration script that upgrades you to the latest heroicons library for either vue or react with either yarn or npm, upgrades your import statements, and upgrades your icon names.

You can run it with:

curl https://gist.githubusercontent.com/christiangenco/470a99f4823ee81f2b22bad83119f599/raw/migrateHeroicons.js | bash

[geisera]

@ryanburns23 well done, and thank you!