A lightweight utility for mapping icons names between SF Symbols, Material Icons, and Material Community Icons. Ideal for cross-platform UI consistency and design migrations.
- π Bidirectional mapping between:
- SF Symbols β Material Icons
- SF Symbols β Material Community Icons
- π¦ Tiny, dependency-free core
npx expo install rn-icon-mapper
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 | |
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 |