rn-icon-mapper

A lightweight utility for mapping icon names between SF Symbols, Material Icons, and Material Community Icons. Ideal for cross-platform UI consistency and design migrations.

✨ Features

• 🔄 Bidirectional mapping between:
  • SF Symbols ↔ Material Icons
  • SF Symbols ↔ Material Community Icons
• 📦 Tiny, dependency-free core

📦 Installation

npx expo install rn-icon-mapper

🔍 Usage

import {
  SF_SYMBOLS_TO_MATERIAL_COMMUNITY_ICONS,
  SF_SYMBOLS_TO_MATERIAL_ICONS,
  MATERIAL_ICONS_TO_SF_SYMBOLS,
  MATERIAL_COMMUNITY_ICONS_TO_SF_SYMBOLS,
} from 'rn-icon-mapper';

const materialCommunityHomeIconName = SF_SYMBOLS_TO_MATERIAL_COMMUNITY_ICONS['house.fill']; // home
const materialIconTvIconName = SF_SYMBOLS_TO_MATERIAL_ICONS['play.tv']; // live-tv
const sfSymbolHomeIconName = MATERIAL_COMMUNITY_ICONS_TO_SF_SYMBOLS['home']; // house.fill
const sfSymbolTvIconName = MATERIAL_ICONS_TO_SF_SYMBOLS['live-tv']; // play.tv

| Material Community Icon Name | Material Icon Name | SF Symbols Name | | ------------------------------- | ------------------------- | -------------------------------------------- | | access-point-network | | network | | access-point-network-off | | network.slash | | | accessibility | accessibility | | account-check | | person.fill.checkmark | | account-circle | | person.circle.fill | | account-circle-outline | | person.circle | | account-clock | | person.badge.clock.fill | | account-clock-outline | | person.badge.clock | | account-key | | person.badge.key.fill | | account-key-outline | | person.badge.key | | account-minus-outline | | person.badge.minus | | account-multiple | | person.2.fill | | account-multiple-outline | | person.2 | | account-off | | person.slash.fill | | account-off-outline | | person.slash | | account-plus-outline | | person.badge.plus | | account-question | | person.fill.questionmark | | account-remove | | person.fill.xmark | | account-voice | | person.wave.2.fill | | alarm | | alarm | | alpha-x-box | | clear.fill | | alpha-x-box-outline | | clear | | | alternate-email | at | | angle-acute | | angle | | apple | | apple.logo | | apple-keyboard-caps | | capslock | | apple-keyboard-command | | command | | apple-keyboard-option | | option | | apple-keyboard-shift | | shift | | archive | | archivebox.fill | | archive-arrow-up | | arrow.up.bin.fill | | archive-arrow-up-outline | | arrow.up.bin | | archive-outline | | archivebox | | archive-remove | | xmark.bin.fill | | archive-remove-outline | | xmark.bin | | arrow-down | | arrow.down | | arrow-down-bold | | arrowshape.down.fill | | arrow-down-bold-box | | square.and.arrow.down.on.square.fill | | arrow-down-bold-box-outline | | square.and.arrow.down.on.square | | arrow-down-bold-circle | | arrowshape.down.circle.fill | | arrow-down-bold-circle-outline | | arrowshape.down.circle | | arrow-down-bold-outline | | arrowshape.down | | arrow-down-box | | arrow.down.square.fill | | arrow-down-circle | | arrow.down.circle.fill | | arrow-down-circle-outline | | arrow.down.circle | | arrow-left | | arrow.left | | arrow-left-bold | | arrowshape.left.fill | | arrow-left-bold-circle | | arrowshape.left.circle.fill | | arrow-left-bold-circle-outline | | arrowshape.left.circle | | arrow-left-bold-outline | | arrowshape.left | | arrow-left-box | | arrow.left.square.fill | | arrow-left-circle | | arrow.left.circle.fill | | arrow-left-circle-outline | | arrow.left.circle | | arrow-left-right-bold | | arrowshape.left.arrowshape.right.fill | | arrow-left-right-bold-outline | | arrowshape.left.arrowshape.right | | arrow-left-top | | arrowshape.turn.up.left | | arrow-left-top-bold | | arrowshape.turn.up.left.fill | | arrow-right | | arrow.right | | arrow-right-bold | | arrowshape.right.fill | | arrow-right-bold-box | | rectangle.portrait.and.arrow.right.fill | | arrow-right-bold-box-outline | | rectangle.portrait.and.arrow.right | | arrow-right-bold-circle | | arrowshape.right.circle.fill | | arrow-right-bold-circle-outline | | arrowshape.right.circle | | arrow-right-bold-outline | | arrowshape.right | | arrow-right-box | | arrow.right.square.fill | | arrow-right-circle | | arrow.right.circle.fill | | arrow-right-circle-outline | | arrow.right.circle | | arrow-right-top | | arrowshape.turn.up.right | | arrow-right-top-bold | | arrowshape.turn.up.right.fill | | arrow-up | | arrow.up | | arrow-up-bold | | arrowshape.up.fill | | arrow-up-bold-circle | | arrowshape.up.circle.fill | | arrow-up-bold-circle-outline | | arrowshape.up.circle | | arrow-up-bold-outline | | arrowshape.up | | arrow-up-box | | arrow.up.square.fill | | arrow-up-circle | | arrow.up.circle.fill | | arrow-up-circle-outline | | arrow.up.circle | | asterisk | | asterisk | | atom | | atom | | | attach-money | dollarsign | | | backpack | backpack.fill | | balloon | | balloon.fill | | bandage | | bandage.fill | | barcode | | barcode | | baseball | | baseball.fill | | basket | | basket.fill | | basket-outline | | basket | | basketball | | basketball.fill | | bell | | bell.fill | | bell-outline | | bell | | book-open | | book.fill | | book-open-outline | | book | | bookmark | | bookmark.fill | | bookmark-off | | bookmark.slash.fill | | bookmark-off-outline | | bookmark.slash | | bookmark-outline | | bookmark | | bookshelf | | books.vertical.fill | | brain | | brain | | brush-variant | | paintbrush | | bullhorn | | megaphone.fill | | bullhorn-outline | | megaphone | | bullhorn-variant | | horn.fill | | bullhorn-variant-outline | | horn | | calendar-alert | | calendar.badge.exclamationmark | | calendar-check | | calendar.badge.checkmark | | calendar-clock | | calendar.badge.clock | | calendar-minus | | calendar.badge.minus | | calendar-month | | calendar | | calendar-plus | | calendar.badge.plus | | camera | | camera.fill | | camera-outline | | camera | | camera-timer | | timer | | cancel | | circle.slash | | card-bulleted | | list.bullet.rectangle.fill | | card-bulleted-outline | | list.bullet.rectangle | | | card-giftcard | giftcard | | cart | | cart.fill | | cart-outline | | cart | | cash | | banknote | | cellphone | | smartphone | | chart-box | | chart.bar.fill | | chart-box-outline | | chart.bar | | chart-pie | | chart.pie.fill | | chart-timeline-variant | | chart.xyaxis.line | | check | | checkmark | | | check-box | checkmark.square.fill | | check-circle | | checkmark.circle.fill | | check-circle-outline | | checkmark.circle | | check-decagram | | checkmark.seal.fill | | check-decagram-outline | | checkmark.seal | | checkbox-blank-badge | | app.badge.fill | | checkbox-blank-badge-outline | | app.badge | | checkerboard | | rectangle.checkered | | chevron-double-left | | chevron.left.2 | | chevron-double-right | | chevron.right.2 | | chevron-down | | chevron.down | | chevron-down-box | | chevron.down.square.fill | | chevron-down-box-outline | | chevron.down.square | | chevron-down-circle | | chevron.down.circle.fill | | chevron-down-circle-outline | | chevron.down.circle | | chevron-left | | chevron.left | | chevron-left-box | | chevron.left.square.fill | | chevron-left-box-outline | | chevron.left.square | | chevron-left-circle | | chevron.left.circle.fill | | chevron-left-circle-outline | | chevron.left.circle | | chevron-right | | chevron.right | | chevron-right-box | | chevron.right.square.fill | | chevron-right-box-outline | | chevron.right.square | | chevron-right-circle | | chevron.right.circle.fill | | chevron-right-circle-outline | | chevron.right.circle | | chevron-up | | chevron.up | | chevron-up-box | | chevron.up.square.fill | | chevron-up-box-outline | | chevron.up.square | | chevron-up-circle | | chevron.up.circle.fill | | chevron-up-circle-outline | | chevron.up.circle | | circle | | circle.fill | | circle-outline | | circle | | city-variant | | building.2.fill | | city-variant-outline | | building.2 | | clipboard | | clipboard.fill | | clipboard-edit-outline | | pencil.and.list.clipboard | | clipboard-list | | list.clipboard.fill | | clipboard-list-outline | | list.clipboard | | clipboard-outline | | clipboard | | clock | | clock.fill | | clock-alert | | clock.badge.exclamationmark.fill | | clock-alert-outline | | clock.badge.exclamationmark | | clock-check | | clock.badge.checkmark.fill | | clock-check-outline | | clock.badge.checkmark | | clock-outline | | clock | | clock-remove | | clock.badge.xmark.fill | | clock-remove-outline | | clock.badge.xmark | | close | | multiply | | close-box | | xmark.square.fill | | close-box-outline | | xmark.square | | close-circle | | xmark.circle.fill | | close-circle-outline | | xmark.circle | | close-octagon | | xmark.octagon.fill | | close-octagon-outline | | xmark.octagon | | close-thick | | xmark | | cloud | | cloud.fill | | cloud-outline | | cloud | | code-braces | | curlybraces | | code-json | | ellipsis.curlybraces | | code-parentheses | | parentheses | | cog | | gearshape.fill | | cog-outline | | gearshape | | comment-quote | | quote.bubble.fill | | comment-quote-outline | | quote.bubble | | | connected-tv | tv.badge.wifi | | controller-classic | | gamecontroller.fill | | controller-classic-outline | | gamecontroller | | credit-card | | creditcard.fill | | credit-card-outline | | creditcard | | cricket | | cricket.ball.fill | | crop | | crop | | crop-rotate | | crop.rotate | | crown | | crown.fill | | crown-outline | | crown | | database | | externaldrive.fill | | database-alert | | externaldrive.fill.badge.exclamationmark | | database-alert-outline | | externaldrive.badge.exclamationmark | | database-check | | externaldrive.fill.badge.checkmark | | database-check-outline | | externaldrive.badge.checkmark | | database-clock | | externaldrive.fill.badge.timemachine | | database-clock-outline | | externaldrive.badge.timemachine | | database-minus | | externaldrive.fill.badge.minus | | database-minus-outline | | externaldrive.badge.minus | | database-outline | | externaldrive | | database-plus | | externaldrive.fill.badge.plus | | database-plus-outline | | externaldrive.badge.plus | | database-remove | | externaldrive.fill.badge.xmark | | database-remove-outline | | externaldrive.badge.xmark | | delete-circle | | trash.circle.fill | | delete-circle-outline | | trash.circle | | delete-off | | trash.slash.fill | | delete-off-outline | | trash.slash | | division | | divide | | dots-horizontal | | ellipsis | | dots-horizontal-circle | | ellipsis.circle.fill | | dots-horizontal-circle-outline | | ellipsis.circle | | drama-masks | | theatermasks | | draw | | pencil.and.scribble | | | drive-file-rename-outline | rectangle.and.pencil.and.ellipsis | | dumbbell | | dumbbell.fill | | email | | envelope.fill | | email-open | | envelope.open.fill | | email-outline | | envelope | | equal | | equal | | eraser | | eraser | | eraser-variant | | eraser.fill | | exclamation | | exclamationmark | | eye | | eye.fill | | eye-off | | eye.slash.fill | | eye-off-outline | | eye.slash | | eye-outline | | eye | | eyedropper | | eyedropper | | fast-forward | | forward.fill | | fast-forward-outline | | forward | | file-clock | | doc.badge.clock.fill | | file-clock-outline | | doc.badge.clock | | file-cog | | doc.badge.gearshape.fill | | file-cog-outline | | doc.badge.gearshape | | | file-copy | doc.on.clipboard.fill | | file-document | | doc.fill | | file-document-multiple | | doc.on.doc.fill | | file-document-multiple-outline | | doc.on.doc | | file-document-outline | | doc | | file-download | | arrow.down.doc.fill | | file-download-outline | | arrow.down.doc | | file-lock | | lock.doc.fill | | file-lock-outline | | lock.doc | | file-plus | | doc.fill.badge.plus | | file-plus-outline | | doc.badge.plus | | file-question | | doc.questionmark.fill | | file-question-outline | | doc.questionmark | | file-search-outline | | doc.text.magnifyingglass | | file-upload | | arrow.up.doc.fill | | file-upload-outline | | arrow.up.doc | | filmstrip | | film.fill | | filmstrip-box-multiple | | film.stack.fill | | fire | | flame | | fire-circle | | flame.circle | | firework | | fireworks | | flag | | flag.fill | | flag-outline | | flag | | flashlight | | flashlight.on.fill | | flashlight-off | | flashlight.off.fill | | folder | | folder.fill | | folder-account | | folder.fill.badge.person.crop | | folder-account-outline | | folder.badge.person.crop | | folder-cog | | folder.fill.badge.gearshape | | folder-cog-outline | | folder.badge.gearshape | | | folder-open | folder | | folder-plus | | folder.fill.badge.plus | | folder-plus-outline | | folder.badge.plus | | folder-remove | | folder.fill.badge.minus | | folder-remove-outline | | folder.badge.minus | | football | | football.fill | | format-bold | | bold | | format-font | | textformat | | format-italic | | italic | | format-list-bulleted | | list.bullet | | format-list-checks | | checklist | | format-quote-close | | quote.closing | | format-quote-open | | quote.opening | | | format-size | textformat.size | | format-strikethrough | | strikethrough | | format-underline | | underline | | fountain-pen-tip | | pencil.tip | | gift | | gift.fill | | gift-outline | | gift | | globe-model | | globe.desk | | greater-than | | greaterthan | | grid | | grid | | hammer | | hammer.fill | | hammer-screwdriver | | wrench.and.screwdriver.fill | | headphones | | headphones | | heart | | heart.fill | | heart-flash | | bolt.heart.fill | | heart-outline | | heart | | help | | questionmark | | hockey-puck | | hockey.puck.fill | | home | | house.fill | | home-circle | | house.circle.fill | | home-circle-outline | | house.circle | | home-outline | | house | | image | | photo.fill | | image-frame | | photo.artframe | | image-multiple | | photo.stack.fill | | image-multiple-outline | | photo.stack | | image-outline | | photo | | image-plus | | photo.badge.plus.fill | | image-text | | doc.richtext | | inbox | | tray.fill | | inbox-arrow-down | | tray.and.arrow.down.fill | | inbox-arrow-down-outline | | tray.and.arrow.down | | inbox-arrow-up | | tray.and.arrow.up.fill | | inbox-arrow-up-outline | | tray.and.arrow.up | | inbox-full | | tray.full.fill | | inbox-full-outline | | tray.full | | inbox-multiple | | tray.2.fill | | inbox-multiple-outline | | tray.2 | | infinity | | infinity | | information | | info.circle.fill | | information-outline | | info.circle | | key | | key.fill | | key-outline | | key | | keyboard | | keyboard.fill | | keyboard-backspace | | delete.left | | keyboard-outline | | keyboard | | keyboard-settings | | keyboard.badge.ellipsis.fill | | keyboard-settings-outline | | keyboard.badge.ellipsis | | keyboard-space | | space | | laptop | | laptopcomputer | | laptop-off | | laptopcomputer.slash | | lasso | | lasso | | less-than | | lessthan | | lightbulb | | lightbulb.fill | | lightbulb-off | | lightbulb.slash.fill | | lightbulb-off-outline | | lightbulb.slash | | lightbulb-outline | | lightbulb | | lightning-bolt | | bolt.fill | | lightning-bolt-outline | | bolt | | link | | link | | link-plus | | link.badge.plus | | | live-tv | play.tv | | lock | | lock.fill | | lock-alert | | exclamationmark.lock.fill | | lock-alert-outline | | exclamationmark.lock | | lock-clock | | lock.badge.clock.fill | | lock-off | | lock.slash.fill | | lock-off-outline | | lock.slash | | lock-open | | lock.open | | lock-open-alert | | lock.open.trianglebadge.exclamationmark | | lock-open-alert-outline | | lock.open.trianglebadge.exclamationmark.fill | | lock-open-outline | | lock.open.fill | | lock-outline | | lock | | lock-reset | | lock.rotation | | magnify | | magnifyingglass | | magnify-minus-outline | | minus.magnifyingglass | | magnify-plus-outline | | plus.magnifyingglass | | map | | map.fill | | map-marker-off-outline | | mappin.slash | | map-marker-outline | | mappin | | map-marker-radius | | mappin.circle.fill | | map-marker-radius-outline | | mappin.circle | | map-outline | | map | | marker | | highlighter | | math-compass | | compass.drawing | | medal | | medal.fill | | medal-outline | | medal | | | menu-book | menucard.fill | | message | | message.fill | | message-outline | | message | | message-plus | | plus.message.fill | | message-plus-outline | | plus.message | | message-processing | | ellipsis.message.fill | | message-processing-outline | | ellipsis.message | | message-question | | questionmark.bubble.fill | | message-question-outline | | questionmark.bubble | | message-star | | star.bubble.fill | | message-star-outline | | star.bubble | | microphone | | mic.fill | | microphone-off | | mic.slash.fill | | microphone-outline | | mic | | microphone-plus | | mic.fill.badge.plus | | microphone-variant | | music.mic | | microsoft-xbox | | xbox.logo | | minus | | minus | | monitor | | display | | monitor-lock | | lock.display | | monitor-multiple | | display.2 | | movie-open | | movieclapper.fill | | movie-open-outline | | movieclapper | | music-note | | music.note | | newspaper | | newspaper | | newspaper-variant | | newspaper.fill | | | nightlight-round | moon.fill | | note-outline | | note | | note-text-outline | | note.text | | office-building | | building.fill | | office-building-outline | | building | | palette | | paintpalette.fill | | palette-outline | | paintpalette | | palette-swatch | | swatchpalette.fill | | palette-swatch-outline | | swatchpalette | | paperclip | | paperclip | | party-popper | | party.popper.fill | | pause | | pause | | pause-circle | | pause.circle.fill | | pause-circle-outline | | pause.circle | | pen-minus | | pencil.tip.crop.circle.badge.minus.fill | | pen-plus | | pencil.tip.crop.circle.badge.plus.fill | | pencil | | pencil | | pencil-box-outline | | square.and.pencil | | pencil-circle | | pencil.circle.fill | | pencil-circle-outline | | pencil.circle | | pencil-minus-outline | | pencil.tip.crop.circle.badge.minus | | pencil-off | | pencil.slash | | pencil-plus-outline | | pencil.tip.crop.circle.badge.plus | | pencil-ruler | | pencil.and.ruler.fill | | percent | | percent | | | person | person.fill | | | person-outline | person | | phone | | phone.fill | | phone-check | | phone.fill.badge.checkmark | | phone-check-outline | | phone.badge.checkmark | | phone-outline | | phone | | phone-plus | | phone.fill.badge.plus | | phone-plus-outline | | phone.badge.plus | | pin | | pin.fill | | pin-off | | pin.slash.fill | | pin-off-outline | | pin.slash | | pin-outline | | pin | | play | | play.fill | | play-box | | play.square.fill | | play-box-multiple | | play.square.stack.fill | | play-box-multiple-outline | | play.square.stack | | play-box-outline | | play.square | | play-circle | | play.circle.fill | | play-circle-outline | | play.circle | | play-outline | | play | | play-pause | | playpause.fill | | playlist-music | | music.note.list | | plus | | plus | | plus-box | | plus.app.fill | | plus-box-outline | | plus.app | | plus-minus | | plusminus | | power | | power | | power-cycle | | togglepower | | power-off | | poweroff | | power-on | | poweron | | power-plug | | powerplug.fill | | power-plug-outline | | powerplug | | power-sleep | | powersleep | | power-socket-us | | poweroutlet.type.b | | printer | | printer.fill | | printer-outline | | printer | | progress-pencil | | pencil.line | | puzzle | | puzzlepiece.fill | | puzzle-outline | | puzzlepiece | | qrcode | | qrcode | | record-circle | | record.circle.fill | | record-circle-outline | | record.circle | | reorder-horizontal | | line.3.horizontal | | repeat | | repeat | | repeat-once | | repeat.1 | | restart | | restart | | | restore-from-trash | arrow.up.trash.fill | | rewind | | backward.fill | | rewind-outline | | backward | | | router | wifi.router.fill | | ruler | | ruler.fill | | run | | figure.run | | scanner | | scanner | | screwdriver | | screwdriver | | script | | scroll.fill | | script-outline | | scroll | | sd | | sdcard.fill | | send | | paperplane.fill | | send-circle | | paperplane.circle.fill | | send-circle-outline | | paperplane.circle | | send-outline | | paperplane | | server | | server.rack | | shield | | shield.fill | | shield-check | | checkmark.shield.fill | | shield-check-outline | | checkmark.shield | | shield-lock | | lock.shield.fill | | shield-lock-outline | | lock.shield | | shield-outline | | shield | | shield-remove | | xmark.shield.fill | | shield-remove-outline | | xmark.shield | | shopping | | bag.fill | | shopping-outline | | bag | | shuffle | | shuffle | | signal-cellular-3 | | cellularbars | | signature-freehand | | signature | | silverware-fork-knife | | fork.knife | | skateboard | | skateboard | | ski | | skis | | skip-backward | | backward.end.fill | | skip-backward-outline | | backward.end | | skip-forward | | forward.end.fill | | skip-forward-outline | | forward.end | | sleep | | zzz | | soccer | | soccerball | | soccer-field | | sportscourt | | sony-playstation | | playstation.logo | | spirit-level | | level | | square | | square.fill | | square-outline | | square | | square-root | | x.squareroot | | star | | star.fill | | star-box-multiple | | star.square.on.square.fill | | star-box-multiple-outline | | star.square.on.square | | star-four-points | | sparkle | | star-outline | | star | | step-backward | | backward.frame.fill | | step-forward | | forward.frame.fill | | stop | | stop.fill | | stop-circle | | stop.circle.fill | | stop-circle-outline | | stop.circle | | storefront | | storefront.fill | | storefront-outline | | storefront | | sun-thermometer | | thermometer.sun.fill | | sun-thermometer-outline | | thermometer.sun | | surfing | | surfboard | | tag | | tag.fill | | tag-outline | | tag | | target | | target | | tennis | | tennis.racket | | tennis-ball | | tennisball.fill | | ticket-confirmation | | ticket.fill | | ticket-confirmation-outline | | ticket | | timer | | stopwatch.fill | | timer-outline | | stopwatch | | trash-can | | trash.fill | | trash-can-outline | | trash | | tray | | tray | | tray-arrow-down | | square.and.arrow.down | | tray-arrow-up | | square.and.arrow.up | | trophy | | trophy.fill | | trophy-outline | | trophy | | umbrella | | umbrella.fill | | umbrella-outline | | umbrella | | unfold-more-horizontal | | chevron.up.chevron.down | | vector-link | | personalhotspot | | video | | video.fill | | video-outline | | video | | volleyball | | volleyball.fill | | volume-high | | speaker.wave.3.fill | | volume-low | | speaker.fill | | volume-medium | | speaker.wave.1.fill | | volume-minus | | speaker.minus.fill | | volume-plus | | speaker.plus.fill | | volume-variant-off | | speaker.slash.fill | | water | | drop.fill | | water-circle | | drop.circle.fill | | water-outline | | drop | | water-pump | | spigot.fill | | weather-lightning | | cloud.bolt | | weather-night | | moon.stars | | weather-rainy | | cloud.rain | | weather-sunny | | sun.min | | weather-sunny-alert | | sun.max.trianglebadge.exclamationmark | | weather-tornado | | tornado | | web | | globe | | webcam | | web.camera.fill | | white-balance-sunny | | sun.max.fill | | wifi | | wifi | | wifi-alert | | wifi.exclamationmark | | wifi-off | | wifi.slash | | wrench | | wrench.adjustable.fill | | wrench-outline | | wrench.adjustable | | youtube-tv | | play.tv.fill |